带有React Router v4的哈希路由器后退按钮

Question

I'm using HashRouter to setup my App like so:

import {HashRouter as Router, Route, Switch, Link} from 'react-router-dom';

const Routing = () => (
  <Router>
    <div>
    <Route exact path ="/" component = {App} />
    <Route path ="/about" component = {About} />
    </div>
  </Router>
)

It works great, but when I click a link to go to /about and then hit the back button nothing happens. How do I make it so my internet browser's back button will take me back to the previous page? The app is built using create-react-app if that makes a difference.

Answer 1

Use Switch

Switch is unique in that it renders a route exclusively. In contrast, every Route that matches the location renders inclusively.

This means that the way you are doing it all routes are being rendered because they match.

If the URL is /about, then About, User, and NoMatch will all render because they all match the path. This is by design, allowing us to compose Routes into our apps in many ways, like sidebars and breadcrumbs, bootstrap tabs, etc.

Now, if we're at /about, Switch will start looking for a matching Route. Route path="/about" will match and Switch will stop looking for matches and render About

Your code should look like this

import {HashRouter as Router, Route, Switch, Link} from 'react-router-dom';

const Routing = () => (
  <Router>
    <Switch>
      <Route exact path ="/" component = {App} />
      <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)