基本名称无法正常工作

Question

我正在尝试使用具有反应路由器的基准名称为on the react-router docs。这是由于base href被弃用。

这是我现在有：

import { Route, Router, useRouterHistory } from 'react-router'; 
 
import { createHistory } from 'history'; 
 
import { render } from 'react-dom'; 
 

 
var history = useRouterHistory(createHistory)({ 
 
    basename: '/subdirectory' 
 
}); 
 

 
render(
 
    <Router history={history}> 
 
    <Route path='/' component={App}> 
 
     <Route path='next' component={Next} /> 
 
    </Route> 
 
    </Router>, 
 
    document.getElementById('root') 
 
);

当我去http://the-url.com/subdirectory页面加载预期（渲染App组件）。但是，当去http://the-url.com/subdirectory/next时，我收到了404错误。我的nginx的配置是：

location /subdirectory { 
    alias /path/to/index.html; 
    index index.html; 
    try_files $uri $uri/ /path/to/index.html; 
} 

Answer 1

我解决它使用：

import { Router, useRouterHistory } from 'react-router' 
import createBrowserHistory from 'history/lib/createBrowserHistory' 

const history = useRouterHistory(createBrowserHistory)({ 
    basename: '/', 
}) 

<Router history={history}> 

我认为这个问题是不同版本的history包。 react-router@2.2.4使用history@2.1.2，而history已经在4.5.1。 因此，请确保您安装了history包装的正确版本。