Как настроить базовое имя в React Router 3.x

Question

У меня есть приложение, работающее на вложенном URL-адресе, а не в корне. Скажем example.com/app.

Я прочитал here, что в ответном маршрутизаторе 2.x вы можете настроить базовые имена.

Как это можно сделать в ответном маршрутизаторе 3.x?

FYI Я также использую пакет react-router-redux.

Answer 1

Я думаю, что раздел о настройке истории в React документации маршрутизатора является то, что вы ищете:

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

Вот полный пример интеграции с реагировать маршрутизаторы-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') 
); 

Answer 2

Эта функциональность больше не существует в React Router. Я прошел аналогичную проблему и нашел это исправление.

Шаг 1: Установите История (3.0.0)

npm install --save history@3.0.0

Шаг 2: Импорт {useBasename} из истории в файле маршрутизатора (файл с <Router>):

import { useBasename } from 'history'

Шаг 3: M odify вашего <Router> как на пример ниже:

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