React Router v4 baseName 和自定义历史

Posted 2023-02-22

【中文标题】React Router v4 baseName 和自定义历史

【英文标题】：React Router v4 baseName and custom history

【发布时间】：2018-05-14 19:12:32

【问题描述】：

我想为我的路由分配一个基本名称，我可以使用 BrowserRouter。

不过，我还想指定一个自定义历史记录，以便以编程方式导航我的用户。我可以用路由器做到这一点。

但是我不能，两者都做。是否可以扩展其中一个路由器以支持此功能或将其包装功能以添加此功能？

我目前的设置是这样的 -

import React from 'react';
import  Router, Switch, Route, Redirect  from 'react-router-dom';

import createHistory from './history';

import Navigation from './components/navigation/Navigation';

import PrivateRoute from './components/private-route/PrivateRoute';

import Home from './containers/home/Home';
import PageTwo from './components/pageTwo/PageTwo';
import Callback from './components/callback/Callback';
import Login from './components/login/Login';

export default () => (
  <Router history=createHistory>
    <div>
      <Navigation />
      <Switch>
        <Route path="/callback" component=Callback />
        <Route path="/login" component=Login />
        <PrivateRoute path="/" exact component=Home />
        <PrivateRoute path="/page-two" component=PageTwo />
        <Redirect to="/" />
      </Switch>
    </div>
  </Router>
);

但是我很想实现一些目标，例如 -

<Router history=createHistory basename="foo">

【参考方案1】：

You can:

<BrowserRouter basename="/your/app">
  <App/>
</BrowserRouter>

或者直接配置history对象：

import  Router  from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory( basename: '/your/app' );

<Router history=history>
  <App />
</Router>

【讨论】：

太棒了。但是你能解释一下有什么区别吗？或何时使用一个而不是另一个

@MardONE 根据the official documentation 使用低级 的最常见用例是将自定义历史记录与 Redux 或 Mobx 等状态管理库同步。请注意，在 React Router 旁边使用状态管理库不需要这样做，它仅用于深度集成。 使用 Router 和自定义 history 对象，您可以执行以下操作监听位置变化 - history.listen((location, action) => );