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

Question

So, I'm creating a sidebar that has dropdown menus and I can't figure out how I would create a display page or filler page for my sub menus.

Here's my example data file

 const dropdownData = [
      {
         title: "Data',
         path: '/data',
         dropdownItems: [
          {
            title: 'Sub Data',
            path: '/data/subdata',
           },
           {
             title: 'Sub Data 2',
            path: '/data/subdata2',
           },
         ]
       }

So in my App.js I would normally do this for only one page

   <Router>
    <Sidebar />
    <Switch>
      <Route path='/data' component={Data} />
    </Switch>
  </Router>

I then create a pages folder with a Data.js page and just show a filler text like below

      import React from 'react';

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

      export default Data;

So, if I click on the data menu link, it will just show "Data page" on the screen.

But what I can't figure out is how would I display a "fake" preview page for the sub menus?

Ideally, a page that says "This is the sub data page"

I've seen examples using :id but I don't get how to display it visually?

     <Route path='/data/:id' component={Data} />

I don't get how this would generate a new page if it's linked to my Data page?

Right now I just link to my path

  <Link to={item.path}>

and on the URL it will show data/subdata when I click my sub menu, but I can't figure out how to create the sub menu data page and actually show it visually on my screen?

Henry · Accepted Answer · 2020-11-28 02:24:59Z

2

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() {}

answered Nov 28, 2020 at 2:24

Henry

15.9k7 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Johnxr Over a year ago

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

Henry Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related