React Router renders only after refresh - react-redux

Question

i'm trying to create a web app with react redux and router, and i'm getting a wierd behaviour, the Router is rendering only on refresh.
that my App.js
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Router, Switch, Route, Link } from "react-router-dom";
import { ModalProvider } from './modal/modalContext';
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import Login from "./components/Login";
import Register from "./components/Register";
import Home from "./components/Home";
import Profile from "./components/Profile";
import BoardUser from "./components/BoardUser";
import BoardModerator from "./components/BoardModerator";
import BoardAdmin from "./components/BoardAdmin";
import DataService from "./services/data.service";
import { logout } from "./actions/auth";
import { clearMessage } from "./actions/message";
import { setDc } from "./actions/dc";
import { history } from "./helpers/history";
import simplidc_logo from "./images/dns-24px.svg"
import DetailedRackCard from './components/detailed_rack_card'
const App = () => {
const [showModeratorBoard, setShowModeratorBoard] = useState(false);
const [showAdminBoard, setShowAdminBoard] = useState(false);
const { user: currentUser } = useSelector((state) => state.auth);
const dispatch = useDispatch();
useEffect(() => {
history.listen((location) => {
dispatch(clearMessage()); // clear message when changing location
});
}, [dispatch]);
useEffect(() => {
if (currentUser) {
setShowModeratorBoard(currentUser.roles.includes("ROLE_MODERATOR"));
setShowAdminBoard(currentUser.roles.includes("ROLE_ADMIN"));
}
}, [currentUser]);
useEffect(() => {
DataService.getDevices().then(
(devicesResponse) =>{
DataService.getRacks().then(
(racksResponse) =>{
dispatch(setDc(DataService.getDc(racksResponse,devicesResponse)));
}
)
}
)
}, [dispatch]);
const logOut = () => {
dispatch(logout());
};
return (
<div>
<ModalProvider>
<Router history={history}>
<div>
<nav className="navbar navbar-expand navbar-dark bg-dark">
<Link to={"/"} className="navbar-brand">
SimpliDC
<img
alt=""
src={simplidc_logo}
width="30"
height="30"
/>
</Link>
<div className="navbar-nav mr-auto">
<li className="nav-item">
<Link to={"/home"} className="nav-link">
Home
</Link>
</li>
{showModeratorBoard && (
<li className="nav-item">
<Link to={"/mod"} className="nav-link">
Moderator Board
</Link>
</li>
)}
{showAdminBoard && (
<li className="nav-item">
<Link to={"/admin"} className="nav-link">
Admin Board
</Link>
</li>
)}
{currentUser && (
<li className="nav-item">
<Link to={"/user"} className="nav-link">
User
</Link>
</li>
)}
</div>
{currentUser ? (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/profile"} className="nav-link">
{currentUser.username}
</Link>
</li>
<li className="nav-item">
<a href="/login" className="nav-link" onClick={logOut}>
LogOut
</a>
</li>
</div>
) : (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/login"} className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to={"/register"} className="nav-link">
Sign Up
</Link>
</li>
</div>
)}
</nav>
<input className="" type="text" placeholder="Type any vaule to search in the DC..."/>
<div className="container mt-3">
<Switch>
<Route exact path={["/", "/home"]} component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/profile" component={Profile} />
<Route path="/user" component={BoardUser} />
<Route path="/mod" component={BoardModerator} />
<Route path="/admin" component={BoardAdmin} />
<Route path="/rack/:id" component={DetailedRackCard}/>
</Switch>
</div>
</div>
</Router>
</ModalProvider>
</div>
);
};
export default App;
and i found something wierd happening while looking in the react dev tools on the Router component. this is the location in state after refresh:
and this is the same object after i click a route (login):
i'm desprate for help....
yes, that my only router in the whole app.
thanks!

Answer 1

The state of the <Router/> comes from the history prop which your are providing. You are not modifying that history properly. The bad mutation will be somewhere in another file. It seems like you are calling history.push() with the entire action object instead of just the action.location property.
Using the <Router/> component with a custom history prop is an advanced design pattern that you generally want to avoid unless absolutely necessary. I don't think it's necessary here, at least not for the code in this particular file.
I would recommend using a <BrowserRouter/> (or <HashRouter/>, etc. instead. If you do that, you'll need some other way to address the history.listen subscription (sidenote: you want to use a cleanup function to stop listening when the component unmounts).
You can use a useEffect hook to respond to changes in the location which you access from the useLocation hook.
const location = useLocation();
useEffect(() => {
dispatch(clearMessage()); // clear message when changing location
}, [location, dispatch]);
If you don't want to clear the message on the first render, you can add some additional checks before dispatching. You can potentially use a usePrevious custom hook or something like it. Here I am using useRef to store the previous location. The initial value for the ref is the location from useLocation, so on the first render they will be equal.
const location = useLocation();
const locRef = useRef(location);
useEffect(() => {
console.log(locRef.current, location);
// will be equal on first render
if (locRef.current !== location) {
dispatch(clearMessage());
}
locRef.current = location;
}, [location, dispatch]);
You could modify this to look at just the pathname if you want.