Question

我使用了React Router v 4.3.1 当我多次单击主页链接时，每次单击都会创建一个新的历史记录项。每次都会重新渲染主页。现在，您的浏览器导航已损坏（后退/前进按钮无法正常工作）。

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Example = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li> 
        <li><Link to="/">Home 1</Link></li>
        <li><Link to="/">Home 2</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr />

      <Route exact path="/" render={()=><p>Home</p>} />
      <Route path="/about" render={()=><p>about</p>} />
      <Route path="/topics" render={()=><p>topics</p>} />
    </div>
  </Router>
);

render(<Example />, document.body);

帮助，该如何解决？

Answer 1

这是React Router v4引入的一个古老且已知的问题，目前（AFAIK）尚未解决。

幸运的是，使用自定义历史记录对象可以很容易地解决（如果您想使Redux状态与浏览器历史记录保持同步，也可以执行此操作）。真正的生产代码应该比我在这里写的代码更健壮，但是您可以从这里开始：

a）首先使用<Router>代替<BrowserRouter>。

import { Router, Route, Link } from "react-router-dom";

b）创建自己的历史记录对象（如果没有，请确保npm add history）：

import createBrowserHistoryfrom "history/createBrowserHistory";

// ...

const history = createBrowserHistory();

c）用您自己的实现替换push()方法：

const originalHistoryPush = history.push;

history.push = function(path, state = {}) {
    if (!this.location) {
        originalHistoryPush(path, state);
        return;
    }

    const oldPath = this.location.pathname + this.location.search + this.location.hash;
    if (oldPath !== path || !shallowEqual(state, this.location.state)) {
        originalHistoryPush(path, state);
    } else {
        this.replace(path, state);
    }
};

d）使用自定义历史记录：

<Router history={history}>...</Router>

请注意，我使用的是假设的shallowEqual()方法进行比较。您可以快速编写自己的代码，也可以从那里选择众多实现之一。

Answer 2

这应该可以解决您的问题，如果不能，请告诉我。

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <p>Home</p>;
const About = () => <p>about</p>;
const Topics = () => <p>topics</p>;

const Example = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li> 
        <li><Link to="/">Home 1</Link></li>
        <li><Link to="/">Home 2</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);

render(<Example />, document.body);

位置相同时，链接组件会更新浏览器历史记录

2 个答案: