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

Question

要部署我的应用程序，我能想到的唯一方法是使用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 content时（这将为我设置一切，并使项目可以使用这个Url http://localhost:8080/test/index.html访问），我的浏览器控制台出现以下错误：

警告:[react-router]位置“/test/index.html”与任何路由都不匹配

但我无法解决我的问题。有人能帮忙吗？

Answer 1

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

现在，您正在使用React Router包含的BrowserHistory，但是您需要创建自己的历史实例来了解baseName。

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自己的域名，但您必须是一个付费客户（或至少有一张信用卡附在您的帐户上）。