反应路由器基本网址不起作用答案

【问题标题】：React router base url not working反应路由器基本网址不起作用
【发布时间】：2017-02-02 19:03:58
【问题描述】：

我将这段代码用作我的 React 15.0.1 通用应用程序的路由器。 React 路由器版本是 2.3.0。

import React from 'react';
import { createHistory } from 'history';
import { Router, Route, IndexRoute, Redirect, useRouterHistory } from 'react-router';

import MainLayout from './../views/layout/mainLayout.jsx';
import Home from './../views/home.jsx';
import About from './../views/about.jsx';

import Error404 from './../views/404.jsx';

const browserHistory = useRouterHistory(createHistory)({
    basename: '/example-url'
});

module.exports = (
  <Router history={browserHistory}>
    <Route path='/' component={MainLayout}>
      <IndexRoute component={Home} />
      <Route path='about/' component={About} />
      <Route path='*' component={Error404} />
    </Route>
  </Router>

问题是，我收到以下错误：

不变违规：浏览器历史记录需要一个 DOM

这个解决方案似乎不适用于我的服务器端路由，因为我正在尝试为我的路由设置一个基本名称。

如果我忘记了基本名称，那么一切都很好，但我的应用程序不像水疗中心（我相信客户端上的路由找不到）。

这是我的一些服务器端入口点（app.js）：

import routes from './client/routers/routes.jsx';

const engine = ReactEngine.server.create({
  routes: routes,
  routesFilePath: path.join(__dirname, 'client/routers/routes.jsx'),
});

app.engine('.jsx', engine);
app.set('views', __dirname + '/client/views');
app.set('view engine', 'jsx');
app.set('view', ReactEngine.expressView);

app.get('*', function(req, res) {
  res.render(req.url, { metadata: res.data.metadata,baseUrl: res.data.baseUrl, url: res.data.url });  
});

有人可以帮忙吗？我已经阅读了文档，据说这是正确的方法，很多人似乎支持该解决方案，但我被困在这里。

非常感谢

【问题讨论】：

我想澄清一下：错误是由 gulp 抛出的，所以它发生在捆绑时可以这么说。
我仍然坚持这一点。我敢肯定很多人一定会遇到同样的问题......
这个问题可能与我使用 Paypal 的 react-engine 从服务器端呈现我的视图这一事实有关。

标签： javascript reactjs react-router

【解决方案1】：

你的历史版本是什么？如果你的 react-router 版本是 v2/v3，history 版本应该是 v3，v4 是 react-router v4

【讨论】：