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'));

因此，当我使用web pack dev服务器时，我的路由器工作正常但是当我将文件复制到eclipse项目的web内容时（这将为我设置所有内容并使该项目可以使用此Url {{ 3}}）我在浏览器控制台中收到以下错误：

警告：[react-router]位置＆＃34; /test/index.html"没有匹配任何路线

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

http://localhost:8080/test/index.html

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

Answer 1

默认情况下，React Router会假定您的应用的位置位于您网站的根目录（/）。当您在/test目录中托管您的站点时，除非您指定它，否则React Router不会知道。你需要做的是＆＃34;增强＆＃34;通过指定基名（/test）来使用useRouterHistory历史记录增强器创建历史记录。

现在您正在使用React Router包含的browserHistory，但您需要创建自己的知道基本名称的历史记录实例。

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一起使用，但您必须是付费客户（或至少在您的帐户中附加信用卡）。

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

1 个答案: