Question

我希望我的路线看起来像：

/
/signin
/discussion/:title

但是，超过第二个正斜杠的任何内容都会导致错误，并且我的所有客户端依赖项都会抛出意外的令牌错误。例如，我的index.html文件中正在加载reactjs，我的CSS和我的图像文件。我在后端使用ExpressJS。我在服务器上使用以下行将路由推送到客户端：

app.get('*', function(req, res, next) {
  res.sendFile(path.join(__dirname, 'app/index.html'));
});

routes.jsx

var React  = require('react'),
    Router = require('react-router'),
    Route  = Router.Route,
    IndexRoute = Router.IndexRoute,
    App  = require('./components/app/app.jsx'),
    Home = require('./components/pages/home.jsx'),
    Discussion = require('./components/pages/discussion.jsx'),
    DiscussionArea = require('./components/pages/discussionArea.jsx'),
    Signin = require('./components/pages/signin.jsx'),
    NotFound = require('./components/pages/notFound.jsx');

var routes = (
  <Route path='/' component={App}>
    <IndexRoute component={Home} />
    <Route path='discussion' component={Discussion}>
        <Route path='/discussion/area' component={DiscussionArea} />
    </Route>
    <Route path='signin' component={Signin} />
    <Route path='*' component={NotFound} />
  </Route>
);

module.exports = routes;

main.jsx

var React = require('react'),
    ReactDOM = require('react-dom'),
    ReactRouter = require('react-router'),
    Router   = ReactRouter.Router,
    routes = require('./routes.jsx'),
    createHistory  = require('history').createHistory;

ReactDOM.render((
  <Router history={ createHistory() }>
    {routes}
  </Router> 
), document.getElementById('app'));

为什么我的嵌套路由没有使用react-router挂载？

Answer 1

我找到了答案。请参阅此Stackoverflow答案：Minimum nodejs server setup needed for React using react-router and browserHistory

这与我的服务器为路径提供服务的方式有关。我的资源是相对于URL加载的，当它们应该从服务器的根目录加载时。

解决方案是将<base href="/">添加到index.html文件的头部。

反应嵌套路线未安装

1 个答案: