reactjs - react-router-dom only works on reload, is there any solution or another way to redirect to other pages?

Question

I'm trying to redirect to another page in reactjs with "react-router-dom" and "history" modules. but it changes the url an loads a blank view and needs to reload to load the components.

here is my code:

index.js :

import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
import Routes from "./routes";

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter>
        <Routes/>
      </BrowserRouter>

  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

routes.js

import { Router, Switch, Route } from 'react-router-dom'
import FirstPage from "./first";
import SecondPage from "./seconsPage";
import history from "./history";

export default function Routes() {
    return(
        <Router history={history}>
            <Switch>
                <Route path="/" exact component={FirstPage} />
                <Route path="/second" component={SecondPage} />

            </Switch>
        </Router>
    )
}

history.js

import {createBrowserHistory as history} from "history";

export default history();

first.js

export default function FirstPage() {
    const btnClicked = () => {
        history.push('/second');
    };
    return(
        <div>
            <h3>First Page</h3>
            <button onClick={btnClicked}>click</button>
        </div>

    )
}

seconsPage.js

export default function SecondPage() {
    return(
        <h3>Second Page</h3>
    )
}

I use "history"v5.0.0 and "react-router-dom"v5.2.0

I've also tryied all the solutions over stackoverflow.com but none of them works for me. is there any solution or other modules or ways or tutorials to redirect to other pages in reactjs?

question from:https://stackoverflow.com/questions/65872982/react-router-dom-only-works-on-reload-is-there-any-solution-or-another-way-to-r

Answer 1

In order to make it work, please use history v4, e.g. 4.10.1.

Please find it working here: https://codesandbox.io/s/cocky-tdd-oecnk

The package.json:

"history": "4.10.1",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-router-dom": "5.2.0",

And the why: https://github.com/ReactTraining/history

Documentation for version 5 can be found in the docs directory. This is the current stable release. Version 5 is used in React Router version 6.

Documentation for version 4 can be found on the v4 branch. Version 4 is used in React Router versions 4 and 5.