React router - page does not render until I do a browser refresh

user_805548 0
Viewed 910

I have tried to decouple my components a bit more and I ran into this weird bug. I obscured the other general imports. All components import properly and work.

What happens is I land on "/", then I click a button to navigate to dashboard it's a blank page (the URL did change). Then I hit refresh in my browser and the correct component displays. This also happens if I go back to my landing page; it's blank until I refresh.

In my app component

import history from './services/history';
import Routes from './routes';

function App() {
  return (
    <Router history={history}>
      <Routes />
    </Router>
  );

my history component (super simple)

import { createBrowserHistory} from 'history';

const history = createBrowserHistory();

export default history;

and finally my routes:

import Landing from "../pages/landing/landing.page"
import Dashboard from "../pages/dashboard/dashboard.page.jsx"

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Landing}/>
      <Route path="/dashboard" component={Dashboard}/>
    </Switch>
  );

Here is my landing page, which I click the button to navigate to "/dashboard"

import { Link } from "react-router-dom";

function Landing () {
  return (
    <div class="landing-container">
      <Link to="/dashboard"><button> Setup Tests </button></Link>

    </div>
  ) 
}

export default Landing;
reactjs javascript
1 Answers

It looks like you're now using Router from react-router-dom. From my understanding, you have to import BrowserRouter in terms of browser use. So your code would look like:

import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter history={history}>
      <Routes />
    </Router>
  );
}
user_31042260
Related