使用带有反应路由器的链接进行导航

Question

TL;DR react-router-dom 在导航时达到默认路线，但在刷新时工作正常。我想找到并解决问题。

我需要从 axios 拦截器中调用注销，所以我使用历史 API。它需要router 而不是browserrouter。我在这里设置了一个示例代码：https://stackblitz.com/edit/react-cscupr?file=src%2FApp.js

片段：

import { Router, Route, Switch, useHistory, create } from "react-router-dom";
import { createBrowserHistory } from "history";
import { Link, withRouter } from "react-router-dom";
import React from "react";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router history={history}>
      <Switch>
        <Route
          path="/"
          exact
          component={() => (
            <h1>
              HomePage
              <Link to="/test">Test</Link>
            </h1>
          )}
        />
        <Route path="/test" exact component={Test} />
        <Route render={() => <h1>404: not found</h1>} />
      </Switch>
    </Router>
  );
}

function Test() {
  return <h1> Test Page</h1>;
}

现在，如果我点击上面示例中的那个测试链接，它会转到 404 页面。但是，如果我刷新浏览器，它会毫无问题地加载测试页面。

如果我使用点击导航，我会看到 location 有 action 和另一个名为 location 的属性

但是如果我只是刷新页面，相同的道具没有action 和location 对象似乎是有效的

1. router 是否支持基于链接的导航？如果不是，如何保持声明性链接与历史支持路由？
2. 我看到browserrouter 不支持自定义历史记录。是否可以在功能组件之外调用重定向？我没有使用 redux，而是在寻找基于 React 的简单解决方案。

Answer 1

在降级到 history@4 后修复了这个问题

版本 4 的文档可以在 v4 分支上找到。版本 4 用于 React Router 版本 4 和 5。

使用 history@4.10.1 工作分叉：https://stackblitz.com/edit/react-sd7uze?file=src%2FApp.js

Answer 2

您需要将导入的Router 更改为BrowserRouter。您可以阅读more 了解这些差异。试试：

import { BrowserRouter as Router, Route, Switch, useHistory, create } from "react-router-dom";
import { createBrowserHistory } from "history";
import { Link, withRouter } from "react-router-dom";
import React from "react";

const history = createBrowserHistory();

export default function App() {
  return (
    <Router history={history}>
      <Switch>
        <Route
          path="/"
          exact
          component={() => (
            <h1>
              HomePage
              <Link to="/test">Test</Link>
            </h1>
          )}
        />
        <Route path="/test" exact component={Test} />
        <Route render={() => <h1>404: not found</h1>} />
      </Switch>
    </Router>
  );
}

function Test() {
  return <h1> Test Page</h1>;
}