reactjs-React how to create sub pages with react router to display?

Henry Woody 2020-11-28 10:24:59

You need to create a route (using <Route>) to your subpages. You can do this in one of two ways. Either you can create other <Route>s next to your existing <Route> to "/data" and give the base data route the exact prop. Or you can nest the routing for data subpages in the Data component and split out a separate data "home page" component.

Both of these contain the same main idea but they differ in the manner of organization and the second approach is better for managing and expanding your app in the long-run.

First approach:

<Router>
  <Sidebar />
    <Switch>
      <Route exact path='/data' component={Data} />
      <Route path='/data/subdata' component={SubData} />
      <Route path='/data/subdata2' component={SubData2} />
    </Switch>
</Router>

Second approach (leave the top-level routing as-is and update your Data component to look like this):

function Data() {
  return (
    <Switch>
      <Route exact path="/data" component={ DataHome }/>
      <Route path="/data/subdata" component={ SubData }/>
      <Route path="/data/subdata2" component={ SubData2 }/>
    </Switch>
  );
}

export default Data;


function DataHome() {
  return (
    <div className='data'>
      <h1>Data Page</h1>
    </div>
  );
}

function SubData() {}

function SubData2() {}

Johnxr 2020-11-28 02:53:25

what's the difference with this method and the one in react router where they do the data/:id for links?

Henry Woody 2020-11-28 03:14:36

Using route parameters (:id) lets you pass data from the URL to the rendered component but just uses one component. So you might have like customers/:id and only the CustomerDetail component would render, but would then know the id of the customer to fetch data for. You can use that approach here if you want, though it's a bit non-standard since then you'd be controlling which subpage component gets rendered through usual React conditional rendering instead of using built-in React Router functionality.

Johnxr 2020-11-28 03:45:10

so in terms of folder structure, even those it's under /data/ path, I would still need to create a new .js file correct? So in my pages folder I'd have 3 separate files each named Data.js, Subdata.js, Subdata2.js etc. ? What's the difference of me just saying the path as path="/subdata"? or is it just for page organization structure to keep data related content within the path /data/subdata?

Henry Woody 2020-11-28 05:41:32

Components don't necessarily need to be placed in their own files/folders but that helps with organization. Also the reason for the /data/subdata was just based on how you laid out your routes in the question, but it's all up to you, though if the content seems like it belongs under the main /data route, then I'd keep it there. But if you make the path just /subdata, then the components probably shouldn't be nested under the Data component as I show in the second approach (that way only really makes sense with subroutes).

Johnxr 2020-11-28 16:55:31

I ended up figuring it out. I just did export const SubData = () => {}

React how to create sub pages with react router to display?

热门github