remix-run/history

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

💻 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

React Router v5 is not supposed to be used with history v5. Please use history v4 with React Router v5.