如何在 React Router 3.x 中配置基本名称

Posted 2023-02-21

【中文标题】如何在 React Router 3.x 中配置基本名称

【英文标题】：How to configure a basename in React Router 3.x

【发布时间】：2017-06-30 03:07:22

【问题描述】：

我有一个应用程序在嵌套的 url 上运行，而不是在根目录下。比如说example.com/app。

我读到 here 在 react router 2.x 中您可以配置基本名称。

如何在 react router 3.x 中做到这一点？

仅供参考，我也在使用react-router-redux 包。

【参考方案1】：

我认为 React Router 文档中有关配置历史记录的部分是您正在寻找的内容：

https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#customize-your-history-further

这是一个与 react-router-redux 集成的完整示例（排除了一些不必要的信息）：

import React from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import  useRouterHistory  from 'react-router';
import  syncHistoryWithStore  from 'react-router-redux';

import Root from './containers/Root';
import configureStore from './store/configureStore';

const historyConfig =  basename: '/some-basename' ;
const browserHistory = useRouterHistory(createBrowserHistory)(historyConfig);

const store = configureStore( initialState, browserHistory );
const history = syncHistoryWithStore(browserHistory, store, 
  selectLocationState: (state) => state.router,
);

ReactDOM.render(
  <Root history=history store=store />,
  document.getElementById('root')
);

【讨论】：

我认为这只适用于 react-router 2.x

React 路由器 3.x 本质上是没有弃用 API 的 2.x。我会试一试并发布任何错误

Uncaught Error: Expected the routing state to be available either as `state.routing` or as the custom expression you can specify as `selectLocationState` in the `syncHistoryWithStore()` options. Ensure you have added the `routerReducer` to your store's reducers via `combineReducers` or whatever method you use to isolate your reducers.

检查上面的例子。 syncHistoryWithStore 的第三个参数是一个选项对象。 selectLocationState 传递了一个选择器，该选择器指向您的路由状态。如果您不想指定此项，请将您的路由器命名为在您的根 combineReducers 中声明“路由”作为错误状态。

链接好像坏了。有人知道它现在住在哪里吗？

【参考方案2】：

React Router 中不再存在此功能。我遇到了类似的问题并找到了此修复程序。

第 1 步： 安装历史记录 (3.0.0)

npm install --save history@3.0.0

第 2 步： 从路由器文件（带有<Router> 的文件）的历史记录中导入 useBasename ：

import useBasename from 'history'

第 3 步：修改您的 <Router>，如下例所示：

<Router history= useBasename(() => browserHistory)( basename: '/app' ) >

【讨论】：

宾果游戏。完美运行。谢谢！