Load route by clicking on the menu inside a component (Dashboard)

Question

Now I’m using the Adonis (I love the Laravel) and doing the Reactjs case here on the blog. more I came across the following situation:

I have an admin Dashboard, where the same has:

• Header.js (navbar)
• sidebar.js (side menu)
• content js.

How do I stop every time I click on a menu item it loads the content, without having to copy all this structure on each page? type, make a template and all routes load into content?

Today my little project is like this:

route js

const Routes = () => (


<browserrouter>


<switch>


<route exact="" path="/" component="{Login}"/>


<privateroute path="/app" component="{dashboard}"/>


<privateroute path="/clientes" component="{dashboard}"/>


</switch>


</browserrouter>


)

Dashboard.js

<>
...
<route path="/clientes" component="{Clientes}"/>

Answer 1

You should use a library like React Router. On this website you find a tutorial on how to configure in your React project.

Briefly, in the main component of your application you should add the component <BrowserRouter> and within this all routes will be defined. The path for each route and which component to render will be defined using the <Route>. As the example below:

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div class="sidebar">
    <Link to="/">Home</Link>
    <Link to="/news">News</Link>
  </div>
  <div class="content">
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>