简体   繁体   English

反应路由器基本URL不起作用

[英]React router base url not working

I've got this piece of code as a router for my React 15.0.1 universal app. 我已经将这段代码作为我的React 15.0.1通用应用程序的路由器。 React router version is 2.3.0. React Router版本是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>

The problem is, that I'm getting the following error: 问题是,我收到以下错误:

Invariant Violation: Browser history needs a DOM 永久违反:浏览器历史记录需要DOM

It seems that this solution doesn't work for my server side routing, as I'm trying to set a basename for my routes. 似乎该解决方案不适用于我的服务器端路由,因为我正在尝试为路由设置基本名称。

If I forget about the basename, then everything is fine but my application doesn't behave like a spa (I believe that routes on client side are not found). 如果我忘记了基名,那么一切都很好,但是我的应用程序的行为不像spa(我相信找不到客户端的路由)。

Here is some of my server side entry point (app.js): 这是我的一些服务器端入口点(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 });  
});

Could anybody help please? 有人可以帮忙吗? I have read through the docs and supposedly this is the right way to do it and many people seem to support the solution but I'm stuck here. 我已经阅读了所有文档,并认为这是正确的方法,而且许多人似乎都支持该解决方案,但我仍然坚持。

Thank you very much 非常感谢你

what's your history version? 您的历史记录是什么版本? if your react-router version is v2/v3, history version should be v3, v4 is for react-router v4 如果您的react-router版本是v2 / v3,则历史版本应该是v3,v4是react-router v4

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM