You can also connect with me on Twitter or buy me a coffee if you like my articles. create src/Features/.tsx and modify it like below. we need to make test pages for routing pages. types/react-router-dom: it’s type definitions of react-router-dom for Typescript. That's all about the nested routing for React! If you follow some different approach for this, do let me know that in comments. react-router-dom: this is React Router library. There is also one similar example in the official documentation of react router here. In the github repo I have also added a Navbar to one page. You can keep nesting in more levels as required in your app with the same approach. This way the Home will always be aware of its subcomponents and routing will never go wrong! One thing which is very important to notice here is routes passed down to home component like props. One Switch is there to render the component which user selects on clicking the sidebar and again, it is using the same RouteWithSubRoutes component to pass on further subroutes(If any). We have created an array here just to show the sidebar and we have added links to all the pages inside that sidebar. Home component is similar to any usual react component. Now, let us create a very simple login page, to get started with the app.Įnter fullscreen mode Exit fullscreen mode
React router dom example github code#
So inside App.js, wrap complete code into BrowserRouter. The routing will start by adding a BrowserRouter to the app. There will not be any login system or authorisation for any routes as that is out of scope for this tutorial. We will also have one login page, from which we will go inside this dashboard. One of these pages will have a separate navigation bar on top to go to some more pages directly.
![react router dom example github react router dom example github](https://raw.githubusercontent.com/remix-run/react-router/main/static/base-branch.png)
So, we are going to create a simple looking dashboard, which will have one common sidebar with some page link. If you want to skip this tutorial and directly check the code, you can check my github repo. As these are pretty basic steps, I am not including them into this article. So, let's dive in.įor this tutorial, I created a simple project with create-react-app and added react-router-dom to it using npm. This becomes a very common use case when you are working with React App, so I thought of sharing my routing approach here. I had to implement routing which was nested upto 3 levels. Initially I was pretty confused, as React Router’s simple nested routing pattern couldn't work for me. Before a while, I came across this very common use-case of React Routing, where there are nested routes at many levels. React Router Dom becomes one of the mandatory libraries to understand when you are working with ReactJS.