Passing data via Route in React apps?

Question

I have a datatable in my react app and when I click on "Add New" button on the datatable, I open AddNew page (a reusable form). This page reads the form fields (employeeInputs) given on the App.js

import { employeeInputs } from "./formSource";

function App() {

  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/">
            <Route path="employees">
              <Route
                path="new"
                element={<AddNew inputs={employeeInputs} title="Add New" />}
              />
            </Route>
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

My question: If I use this approach, I can define new form fields for the other records e.g. Department, Salary ... and read fields in here by adding reference as:

import { employeeInputs } from "./formSource";

However, should I pass this parameter (name or the input, e.g. "employeeInputs") from the Datatable where I call this form? Otherwise, I do not make my App.js dirty with unnecesaary code. Any idea?

If you want to use this on same url then it will work otherwise for different route you have to sent data using react-router via state. like this: — Mahmudul Hasan, Mar 06 '23 at 11:53

score 2 · Accepted Answer · edited Mar 06 '23 at 16:51

2

I got this issue and fixed it with the pass state in Link component of react-router-dom.

<Link to="/new" state={{ data: employeeInputs }}>

edited Mar 06 '23 at 16:51

Drew Reese

165,259
14
153
181

answered Mar 06 '23 at 12:13

Nayan Bhakhar

48
1
8

score 1 · Answer 2 · answered Mar 06 '23 at 12:44

First of all you can split your app components into body header and footer


function App() {

 return (
   <div>
<Header/>
        <Body/>
       <Footer /> 
       </Routes>
     </BrowserRouter>
   </div>
 );
}

export default App;

your new body components will look like

import { employeeInputs } from "./formSource";

function Body () {
return (
<BrowserRouter>
       <Routes>
<Route path="/">
           <Route path="employees">
             <Route
               path="new"
               element={<AddNew inputs={employeeInputs} title="Add New" />}
             />
           </Route>
         </Route>
</Routes>
     </BrowserRouter>
)
export default Body

your header component will contain your navigation bar you footer is your footer ,

otherwise it depend on what is exactly your employeeInputs

Passing data via Route in React apps?

2 Answers2

Linked