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

IT技术 reactjs react-router browser-history react-router-redux
2021-05-10 16:17:45

我有一个应用程序在嵌套的 url 上运行,而不是在 root 上运行。说吧example.com/app

在这里读到在react-router 2.x 中你可以配置基本名称。

这如何在react-router 3.x 中完成?

仅供参考,我也在使用该react-router-redux软件包。

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

我认为 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')
);