我的 React 应用程序的根文件夹与 React-Router 冲突

Question

我的 React 应用程序托管在 www.mywebsite.com/myreact

当我定义我的路线时，我做了这样的事情：

<Router history={history}>
    <Route path="/" component={App} />
        <Route path="login" component={Login} />
    </Route>
</Router>

尽管如此，它一直抱怨路由中没有定义/myreact。

当我定义它时，是这样的：

<Route path="/myreact" component={App} />

并且我尝试访问 URL www.mywebsite.com/myreact/login，浏览器抛出 404 错误。

不过我可以正常访问www.mywebsite.com/myreact。

我该怎么办？

谢谢。

Answer 1

您应该能够为您的应用 'root' url 创建具有不同基本名称的自定义 history 对象。在创建历史对象时使用 useRouterHistory 增强功能

https://github.com/reactjs/react-router/blob/master/docs/API.md#userouterhistorycreatehistory

一些相关评论在this github issue thread

import { createHistory } from 'history';
import { useRouterHistory } from 'react-router';

const browserHistory = useRouterHistory(createHistory)({
    basename: '/myreact'
});

您的路由文件现在应该可以使用 browserHistory

<Router history={browserHistory}>
    <Route path="/" component={App} />
        <Route path="login" component={Login} />
    </Route>
</Router>

我的 React 应用程序的根文件夹与 React-Router 冲突

Root folder of my React application conflicts with React-Router

javascript

reactjs

react-router