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() {}
what's the difference with this method and the one in react router where they do the
data/:idfor links?Using route parameters (
:id) lets you pass data from the URL to the rendered component but just uses one component. So you might have likecustomers/:idand only theCustomerDetailcomponent 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.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 aspath="/subdata"? or is it just for page organization structure to keep data related content within the path/data/subdata?Components don't necessarily need to be placed in their own files/folders but that helps with organization. Also the reason for the
/data/subdatawas 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/dataroute, then I'd keep it there. But if you make the path just/subdata, then the components probably shouldn't be nested under theDatacomponent as I show in the second approach (that way only really makes sense with subroutes).I ended up figuring it out. I just did export const SubData = () => {}