React 路由器无法处理路由并返回不匹配的警告

IT技术 reactjs react-router
2021-05-25 05:30:32

我有一个示例项目只是为了玩 react 并了解它是如何工作的。

对于开发环境，我使用 webpack 开发服务器，但这对于实际部署来说还不够。显然，当谈到实际部署时，似乎没有好的解决方案，我唯一能找到的就是使用 heroku，我不能在我的域下拥有我的应用程序，并且应该以 heroku 结尾，这在现实世界的开发中是不可接受的（请更正我如果我错了，因为我不确定部署我的网络应用程序的最佳方式是什么）。

要部署我的应用程序，我能想到的唯一方法是使用 tomcat。所以我把我项目的bundle.js和index.html文件复制到了eclipse IDE的WebContent中。以下是 index.js 文件：

import {render} from "react-dom";
import React from "react";
import {Router, Route, browserHistory, useRouterHistory, IndexRoute} from     "react-router";
import { createHistory } from 'history';
import {Provider} from "react-redux";
import Home from "./container/Home";
import {Bridge} from "./router-bridge/Bridge";
import {T} from "./components/T";
import store from "./store";



class Tj extends React.Component {

   render() {
        const history = useRouterHistory(createHistory)({
       basename: '/test'
       });
    return (
        <Router history={history}>
            <Route path={"/"} component={Bridge} >
                <IndexRoute component={Home} />
                <Route path={"user"} component={T} />
                <Route path={"home"} component={Home} />
            </Route>
            <Route path={"/test/"} component={Bridge} >
                <IndexRoute component={Home} />
                <Route path={"user"} component={T} />
                <Route path={"home"} component={Home} />
            </Route>
            <Route path={"home"} component={Home} />
        </Router>
    );
  }
 }
  render(
   <Provider store={store}>
    <Tj/>
</Provider>,
window.document.getElementById('mainContainer'));

因此，当我使用 web pack dev server 时，我的路由器工作正常，但是当我将文件复制到 eclipse 项目的 web 内容时（这将因此为我设置所有内容并使该项目可通过此 URL http://localhost访问和访问:8080/test/index.html ) 我在浏览器控制台中收到以下错误：

警告：[react-router] 位置“/test/index.html”没有匹配任何路由

我还查看了一些与此类似的帖子，例如：

类似的帖子

但我无法解决我的问题。任何人都可以帮忙吗？

1个回答

默认情况下，React Router 假定您的应用程序的位置位于您站点的根目录 ( /)。当你在/test目录中托管你的站点时，除非你指定它，否则 React Router 不知道。您需要做的是useRouterHistory通过指定基本名称 ( /test)使用历史增强器来“增强”您的历史。

现在您正在使用browserHistoryReact Router 中包含的 ，但是您需要创建自己的历史实例来了解基本名称。

import { useRouterHistory, Router } from 'react-router'
// createHistory creates a browser history instance
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
  basename: '/test'
})

class App extends React.Component {

  render() {
    return (
      <Router history={history}>
        ...
      </Router>
    )
  }
}

此外，您可以在 Heroku 中使用您自己的域，但您必须是付费客户（或至少在您的帐户中附有信用卡）。

其它你可能感兴趣的问题
上一篇在 Ultimaker Cura 中更改光栅角度、光栅宽度和构建方向 下一篇在 javascript 中使用 fetch 请求 API 有 CORS 策略错误