Question

我正在使用HashRouter来设置我的应用程序：

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>
)

效果很好，但当我点击一个链接转到/关闭然后点击后退按钮时没有任何反应。如何制作，以便我的互联网浏览器后退按钮将我带回上一页？该应用程序是使用create-react-app构建的，如果这会产生影响。

Answer 1

使用Switch

切换的独特之处在于它专门呈现路线。在相比之下，与位置匹配的每条路线都包含在内。

这意味着你正在渲染所有路线，因为它们匹配。

如果URL是/ about，那么About，User和NoMatch将全部   渲染，因为它们都匹配路径。这是设计，允许我们   通过多种方式将路由组合到我们的应用程序中，例如侧边栏和   面包屑，引导标签等。

现在，如果我们处于/关闭，Switch将开始寻找匹配   路线。 路径路径=＆＃34; / about＆＃34; 将匹配，Switch将停止   寻找比赛并呈现关于

您的代码应如下所示

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>
)

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

1 个答案: