Question 73592 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Passing data via Route in React apps? – Reactjs

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?

Tags:

2

Answers


  1. 0

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

    <Link to="/new" state={{ data: employeeInputs }}>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search