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.
Issue
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.
Solution
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;
Related
New to react, So a little confused on why this was giving me an error.
This is my main.js file
const Main = () => (
<div>
<Menu pointing secondary stackable>
<Menu.Menu position='right'>
<Menu.Item active as={NavLink} exact to='/' name='Welcome' />
<Menu.Item as={NavLink} to='/powersection' name='power' />
</Menu.Menu>
</Menu>
<Segment raised className='magentaSegment'>
<Routes>
<Route exact path='/' element={<HomeView />} />
<Route path='/powersection' element={<PowerSection />} />
</Routes>
</Segment>
</div>
)
export default Main
This is what my App.js file looks like
function App() {
return (
<div id='container'>
<div id='main'>
<Routes>
<Route path='/' element={ <Main />} />
</Routes>
</div>
<div id='footer'>
<Footer />
</div>
</div>
);
}
export default App;
And this is my index.js file.
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
When I toggle to the Power menu item. this is the error i get
index.js:44 No routes matched location "/powersection"
Anyone know how i can fix this? Thank you
Currently using ReactJS to construct a small web app. I have the following parent function:
const Main = () => {
return (
<div className="dialog-base">
<BrowserRouter>
<Switch>
<Route exact path="/login" component={Login}></Route>
<Route exact path="/login/forgot_password" component={ForgotPwd}></Route>
<Route exact path="/login/reset_password/:key" component={ResetPwd}></Route>
<Route exact path="/portal" component={Portal}></Route>
</Switch>
</BrowserRouter>
</div>
);
}
and the following is the "Portal" component:
class Portal extends React.Component {
render = () => {
return (
<BrowserRouter basename="/main">
<div className="navmenu">
<NavLink to="messaging" activeClassName="selected">Messaging</NavLink>
<NavLink to="files" activeClassName="selected"></NavLink>
<NavLink to="payledger" activeClassName="selected"></NavLink>
</div>
<div className="apparea">
<Switch>
<Route path="/messaging" component={Messaging}></Route>
<Route path="/files" component={Files}></Route>
<Route path="/payledger" component={PayLedger}></Route>
</Switch>
</div>
</BrowserRouter>
);
}
}
When the portal component is loaded and I refresh the web page, the page goes blank. I am assuming that this has something to do with the nested routing? Any help on how to fix it would be much appreciated.
You don't need two <BrowserRouter />. Just define one <BrowserRouter /> in your top level component.
In react-router-dom v4+ the <Route /> is just like a regular component and you can use it inside your components to render UI when the path matches the URL.
Here is the working codesandbox example.
Make sure not to put exact on your parent <Route /> because when you have child routes like /main/messaging the <Route exact path="/main" /> never gets to render and therefore children of that route can't be rendered also.
You keep your <Main /> component as is but remove the exact from the <Route path='/portal' /> and change the <Portal />.
class Portal extends React.Component {
render = () => {
return (
<React.Fragment>
<div className="navmenu">
<NavLink to="/portal/messaging" activeClassName="selected">Messaging</NavLink>
<NavLink to="/portal/files" activeClassName="selected"></NavLink>
<NavLink to="/portal/payledger" activeClassName="selected"></NavLink>
</div>
<div className="apparea">
<Switch>
<Route path="/portal/messaging" component={Messaging}></Route>
<Route path="/portal/files" component={Files}></Route>
<Route path="/portal/payledger" component={PayLedger}></Route>
</Switch>
</div>
</React.Fragment>
);
}
}
When I click on the Navigation links the URL changes but the component doesn't render, and when I reload the page with the same link the component renders
APP.js
render() {
return (
<div>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Main} />
<Route path="/Men"component={DisplayPage} />
</Switch>
</BrowserRouter>
</div>
)
}
Nav.js
return (
<div className="MainContainer">
<header>
<nav>
<ul>
<li><Title/></li>
<li><Link to='/Men'>MEN</Link></li>
<li><a href>WOMEN</a></li>
<li><a href>STYLEGUIDE</a></li>
<li><a href>OUTLET</a></li>
</ul>
</nav>
<Cart/>
</header>
</div>
);
Add the Nav component inside <BrowserRouter>:
return (
<div>
<BrowserRouter>
<Nav />
<Switch>
<Route exact path="/" component={Main} />
<Route path="/Men"component={DisplayPage} />
</Switch>
</BrowserRouter>
</div>
)
Can you try like this ?
render() {
return (
<BrowserRouter>
<Nav />
<Switch>
<Route exact path="/" component={Main} />
<Route exact path="/Men"component={DisplayPage} />
</Switch>
</BrowserRouter>
)
}
consider the following example, I have a login page and an admin page. After logging in we will be redirected to admin page.
The admin page is shown as follows.
Desired behaviour: To render cars component in the admin component itself
Actual behaviour: On clicking cars or bikes component they are being rendered on a different page.
code is as follows
App.js
//imports here
function App() {
return(
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/admin" component={Admin} />
<Route exact path="/cars" component={Cars} />
<Route exact path="/bikes" component={Bikes} />
</Switch>
</Router>
);
}
Admin.js
//imports here
const Admin = () => {
return (
<Fragment>
<div className="is-flex">
<Sidebar />
<Navbar />
</div>
</Fragment>
);
};
navbar.js
// imports here
const Sidebar = () => {
return (
<aside className="aside">
<p className="menu-label">Test Routes</p>
<ul className="menu-list">
<li>
<Link to="/cars">Cars</Link>
</li>
<li>
<Link to="/bikes">Bikes</Link>
</li>
</ul>
</aside>
);
};
Using react-router-dom ^5.1.2
Tried this but not able to understand what I missed? how to solve this problem?
Move your default route to the bottom of the stack. i.e.
function App() {
return(
<Router>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/cars" component={Cars} />
<Route path="/bikes" component={Bikes} />
<Route exact path="/" component={Login} />
</Switch>
</Router>
);
}
I have a react application in which I have wrapped layout components for the other routes, the thing is when I click the links present in the sidebar(part of layout) they are not being rendered on the screen, here is my code.
App.js
//Imports here
<Provider store={store}>
<Router>
<Switch>
<Layout>
<Route exact path="/admin" render={() => <Admin />} />
<Route exact path="/employees" render={() => <Employees />} />
<Route exact path="/profile" component={Profile} />
</Layout>
<Switch>
</Router>
</Provider>
Layout.js
//imports here
//styling here
<Link to='/employees' />
// and likewise for rest of the routes
When clicking the links ie, employees or profile they aren't being rendered, tried console.log to see if my layout was obstructing that, but no use. Please help me
It should be inside the Switch component but you can wrap it with a Layout component like that.
const Headers = () => (
<Layout>
<ul>
<li>
<Link to="/admin">Admin</Link>
</li>
<li>
<Link to="/profile">Profile</Link>
</li>
<li>
<Link to="/employees">Employees</Link>
</li>
</ul>
</Layout>
);
function App() {
return (
<Router>
<Layout>
<Header></Header>
<Switch>
<Route exact path="/admin" render={() => <Admin />} />
<Route exact path="/employees" render={() => <Employees/>}/>
<Route exact path="/profile" component={Profile} />
</Switch>
</Layout>
</Router>
);
}
If your URL is changing but the content is not being rendered, the problem is this, apart from wrapping the Routes as mentioned in #G.aziz 's answer since the routes are children WRT layout components we have to use {props.children} inside the layout component to render the content like so...
Layout.jsx
<div>
<Sidebar />
<Navbar />
{props.children} // here we are rendering the routes which we mentioned in the switch component in App.js
</div>
For me this solution fixed. Also please refer this question for further information. React-router v4, URL changing but component doesn't render