React路由器无法处理路由并给出不匹配的警告

Question

我有一个示例项目，仅用于处理反应并了解它是如何工作的。

对于开发环境，我使用webpack dev服务器，但这对于实际的部署是不够的。显然，当涉及到实际的部署似乎没有好的解决方案，我能找到的唯一的东西是使用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')); 

所以，当我使用网络包开发服务器，我的路由器工作正常，但当我将文件复制到Eclipse项目的网页内容（继而会建立家居我和使项目deplyable和到达这个网址http://localhost:8080/test/index.html）我得到以下错误在我的浏览器控制台：

Warning: [react-router] Location "/test/index.html" did not match any routes

我也看了一些帖子与此类似，如：

similar posts

但我无法解决我的问题。谁能帮忙？

Answer 1

默认情况下，React路由器假定您的应用的位置位于您网站的根目录（/）。当您在/test目录中托管您的站点时，除非您指定它，否则React路由器不知道。您需要做的是通过指定基准名称（/test），使用useRouterHistory历史增强器“增强”历史记录。

现在您正在使用React Router包含的browserHistory，但您需要创建自己的知道基本名称的历史记录实例。此外，您可以在Heroku中使用自己的域名，但是您必须是付费客户（或者至少有一张信用卡已附加到您的账户中）。