I'm trying to build a single page app with route but it is not working. It only works when i type the url manually, but if i click it doesnt redirect to the page.
i'm using an sidemenu.js to render the list and in the app.js to render the content.
Here it is:
app.js
function App() {
return (
<div className="App">
<HashRouter>
<BrowserRouter>
<Switch>
<Route exact path="/Home">
<Home />
</Route>
<Route exact path="/Consultas">
<Consultas />
</Route>
<Route path="/diagnosticos" exact component={<Diagnosticos/>}/>
<Route path="/Noticias" component={Noticias}/>
<Route path="/Configs" component={Configuracoes}/>
</Switch>
</BrowserRouter>
</HashRouter>
</div>
);
}
export default App;
sidemenu.js
function SideMenu() {
return (
<HashRouter>
<div id="sideMenu">
<img src={require('./HwBC.png')} alt="" />
<hr />
<h1>menu</h1>
<BrowserRouter>
<ul>
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink exact to="/consultas">Consultas</NavLink></li>
<li><NavLink to="/diagnosticos">Diagnostiocos</NavLink></li>
<li><NavLink to="/noticias">Noticias</NavLink></li>
<li><NavLink to="/configs">Configuracoes</NavLink></li>
</ul>
</BrowserRouter>
</div>
</HashRouter>
)
};
export default SideMenu;
And i have already other solutions in some post and it havent worked yet.
You are rendering the routes and the links to them into two separate routing contexts. Only a single routing context is necessary for the entire React application.
Also, you likely don't need both a HashRouter and a BrowserRouter. Pick the one the suits your app's needs.
Render all the routes and links into a single routing context. Lift the HashRouter/BrowserRouter up the ReactTree such that only a single router is wrapping both the App rendering the routes and the SideMenu components.
Example:
index.js
<BrowserRouter>
<SideMenu />
<App />
</BrowserRouter>
App
function App() {
return (
<div className="App">
<Switch>
<Route path="/Consultas">
<Consultas />
</Route>
<Route path="/diagnosticos" component={Diagnosticos} />
<Route path="/Noticias" component={Noticias} />
<Route path="/Configs" component={Configuracoes}/ >
<Route path="/">
<Home />
</Route>
</Switch>
</div>
);
}
export default App;
SideMenu
function SideMenu() {
return (
<div id="sideMenu">
<img src={require('./HwBC.png')} alt="" />
<hr />
<h1>menu</h1>
<ul>
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/consultas">Consultas</NavLink></li>
<li><NavLink to="/diagnosticos">Diagnostiocos</NavLink></li>
<li><NavLink to="/noticias">Noticias</NavLink></li>
<li><NavLink to="/configs">Configuracoes</NavLink></li>
</ul>
</div>
)
};
export default SideMenu;