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?

score 2 · Accepted Answer · answered Nov 28 '20 at 02:24

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 '20 at 02:24

Henry Woody

14,024
7
39
56

what's the difference with this method and the one in react router where they do the `data/:id` for links? – Johnxr Nov 28 '20 at 02:53
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. – Henry Woody Nov 28 '20 at 03:14
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`? – Johnxr Nov 28 '20 at 03:45
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). – Henry Woody Nov 28 '20 at 05:41
so I tried to do the 3 functions inside one file, but how do I export the other 3 files if I am only allowed on default export? – Johnxr Nov 28 '20 at 16:03
Check out some of the answers on this question to learn about named exports: https://stackoverflow.com/questions/46913851/why-and-when-to-use-default-export-over-named-exports-in-es6-modules/55469496 – Henry Woody Nov 28 '20 at 16:42
1

I ended up figuring it out. I just did export const SubData = () => {} – Johnxr Nov 28 '20 at 16:55

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

1 Answers1

Linked