Reputation: 81
I have a few navigation buttons at the bottom of the screen, and when they are clicked on, the handleClick(path) function is called, and history.push(path) is executed. This results in the browser URL to change correctly, but the component is not re-rendered, so the content corresponding to the route is not shown. I'm using BrowserRouter from react-router-dom. If I execute history.go() after the push, the component is re-rendered, but this should not be necessary. See the commented line in the code below. While my current solution works, there's clearly somthing off, and I would appreciate all answers. Thanks! :-)
import { BrowserRouter, Switch, Route, useHistory, withRouter } from 'react-router-dom';
function Main() {
const [menuValue, setMenuValue] = useState();
const history = useHistory();
const handleClick = (path) => {
history.push(path);
history.go(); //<-- this should be unnecessary, but without it the component is not re-rendered.
}
return (
<div style={{ margin: '0 30%' }}>
<p> userId={user.userId} </p>
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home}></Route>
<Route path='/home' component={Home}></Route>
<Route path='/chat' component={Chat}></Route>
<Route path='/settings' component={Settings}></Route>
</Switch>
</BrowserRouter>
<BottomNavigation value={menuValue} onChange={(event, newValue) =>
{
setMenuValue(newValue);
}}
showLabels
>
<BottomNavigationAction onClick={_ => handleClick("/home")} label="Home" icon={<HomeIcon />} />
<BottomNavigationAction onClick={_ => handleClick("/chat")} label="Chat" icon={<ChatIcon />} />
<BottomNavigationAction onClick={_ => handleClick("/settings")}label="Settings" icon={<SettingsIcon />} />
</BottomNavigation>
</div>
);
Upvotes: 0
Views: 526
Reputation: 81
I found out I had multiple Router-contexts, using BrowserRouter on different levels. By removing the BrowserRouter-tags in the code I posted, I now only have one router context on a higher level in my app. The history.push(path)
now also causes a re-render without the need for the history.go()
. That would be guaranteed to come back to bite me in the behind later.
Upvotes: 0
Reputation: 344
try putting BottomNavigation in Router
return (
<div style={{ margin: '0 30%' }}>
<p> userId={user.userId} </p>
<BrowserRouter>
<Switch>
<Route exact path='/' component={Home}></Route>
<Route path='/home' component={Home}></Route>
<Route path='/chat' component={Chat}></Route>
<Route path='/settings' component={Settings}></Route>
</Switch>
<BottomNavigation value={menuValue} onChange={(event, newValue) =>
{
setMenuValue(newValue);
}}
showLabels
>
<BottomNavigationAction onClick={_ => handleClick("/home")}
label="Home" icon={<HomeIcon />} />
<BottomNavigationAction onClick={_ => handleClick("/chat")}
label="Chat" icon={<ChatIcon />} />
<BottomNavigationAction onClick={_ =>
handleClick("/settings")}label="Settings" icon={<SettingsIcon />} />
</BottomNavigation>
</BrowserRouter>
</div>
);
Upvotes: 2