基本名称无法正常工作答案

【问题标题】：Basename not working properly基本名称无法正常工作
【发布时间】：2016-06-17 17:46:15
【问题描述】：

我正在尝试使用带有 react-router 的基本名称，如 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;
}

【问题讨论】：

你找到解决办法了吗？
有人找到解决方案了吗？
有什么解决办法吗？

标签： react-router

【解决方案1】：

这是我设法让它工作的方法

像这样将路由器基本名称设置为您的子目录

<Router basename="/subdirectory">

如果您使用 create-react-app 并且正在使用 npm run build 构建，您需要在 package.json 中设置主页，以便在生产构建中路径正确

homepage: "{http://www.the-url.com/subdirectory}"

对于 nginx 配置，假设您的 index.html 在/path/to/subdirectory/index.html 下。那么以下应该可以工作

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

【讨论】：

【解决方案2】：

我解决了这个问题：

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 软件包。

【讨论】：

它在开发中运行良好，但在生产中仍然失败

【解决方案3】：

使用浏览器路由器

helpers/history.js

import { createBrowserHistory } from "history";
export default createBrowserHistory();

index.js

import {BrowserRouter as Router} from "react-router-dom";
import history from "helpers/history";
.....

<Router history={history} basename={'/app'}>  
...
</Router>

使用路由器

helpers/history.js

import { createBrowserHistory } from "history";
export default createBrowserHistory({ basename: '/app' });

index.js

import {Router} from "react-router-dom";
import history from "helpers/history";
....

<Router history={history}>  
...
</Router>

【讨论】：

【解决方案4】：

react 文档没有在 react 路由器 v6 中指定任何关于 basename 的内容，这太可悲了。但是，我尝试了一些东西，它奏效了。请找到以下解决方案。干杯！

    <HashRouter> 
    <Routes>
        <Route path='/app'> {/* put url base here and nest children routes */}
            <Route path='path1' element={ <Somecomponent1 /> } />
            <Route path='path2' element={ <Somecomponent2 /> } />
        </Route>
        <Route path="/*" element={<Navigate to="/app/path1" />}  /> {/* navigate to default route if no url matched */}
    </Routes>
</HashRouter>

【讨论】：