History@5.0.1 cooperates with react-router-dom to use Router to jump and match the unsuccessful problem
Gertyxs opened this issue · 1 comments
Gertyxs commented
💻 My environment
history: "^5.0.1"
react: "^17.0.2"
react-dom: "^17.0.2"
react-router-dom: "^5.2.0"
🕵️♂️ Reproducing the issue
App.jsx
import { Router, Switch, Route } from 'react-router-dom'
import Home from './Home';
import About from './About';
import { createBrowserHistory } from 'history'
# Use yourself to manage history
const history = createBrowserHistory()
function App() {
return (
<div className="App">
<Router history={history}>
<Switch>
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Home.jsx
import { Link } from 'react-router-dom'
function Home() {
return (
<div className="Home">
Home
<div>
<Link to="/about">About</Link>
</div>
</div>
);
}
export default Home;
About.jsx
import { Link } from 'react-router-dom'
function About() {
return (
<div className="About">
About
<div>
<Link to="/home">Home</Link>
</div>
</div>
);
}
export default About;
1、Click the route to jump, the address jumped successfully, but the route did not match, and the page displayed blank
2、I downgraded the version to history@4.10.1 and the problem will not occur
mjackson commented
React Router v5 is not supposed to be used with history v5. Please use history v4 with React Router v5.