React-router:嵌套路由错误

Question

下面是我的路由代码

  <Router history={ browserHistory }>
    <Route path="/" component={ App } >
    <IndexRoute component={ Indexpage } />
      <Route path="users" component= { Users } >
        <Route path="signin" component={ Signin } />
        <Route path="signout" component={ Signout } />
        <Route path="signup" component={ Signup } />
      </Route>
    </Route>
</Router>

唯一有效的路径是包含{App}，{Indexpage}，{users}组件的路径

{users}组件嵌套在{App}本身中。所以当我输入URL: "/users"时，它可以工作。

然而，当我去到嵌套在{users}中的其余url时，例如{signin}， {signout}， {signup}。铬状态错误:GET http://localhost:8080/users/bundle.js 404 (Not Found)

但是当我尝试将Route更改为IndexRoute为用户内嵌套组件之一时，该特定的路由将工作。

我有位置{this.props。{App}和{Users}组件的子节点}。

有人能建议如何使嵌套的用户路由工作吗?我正在使用webpack来捆绑我的jsx。

编辑1:我包括了我的webpack。下面的配置

const webpack =  require('webpack');
const path = require('path');
const debug = process.env.NODE_ENV !== "production";
module.exports = {
  entry: ['./public/src/index.js'],
  output: {
    path: path.resolve(__dirname, 'public/src'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: 'public'
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: true , compress: { warnings: false }}),
  ]
};

Answer 1

你得到这个错误(http://localhost:8080/users/bundle.js 404 (Not Found))不是因为React Router嵌套路由的方式有问题，而是因为你的bundle.js文件只能在你的路由文件夹(或第一层路由)中访问。因此它不能加载你的javascript包。不用担心，web pack提供了一个非常有用的修复。公共路径:https://webpack.js.org/guides/public-path/.

所以在你的webpack中。配置替换:

output: {
  path: path.resolve(__dirname, 'public/src'),
  filename: 'bundle.js'
},

:

output: {
  path: path.resolve(__dirname, 'public/src'),
  publicPath: '/',
  filename: 'bundle.js'
},

现在检查您的页面-您会注意到携带bundle.js文件的脚本标签看起来像这样:

<script type="text/javascript" src="/bundle.js?8816b34afd221213c243"></script>

注意bundle.js前面的斜杠。现在，你的页面知道不仅要在第一层路由中寻找bundle js文件，还要在其他所有路由中寻找。因此，无论您是在http://localhost:8080还是http://localhost:8080/users上进行热刷新，浏览器都能够加载bundle.js。

Answer 2

回答的人:alexi2

感谢上面的链接。

使用react-router深层嵌套路由的关键似乎是，如果你试图基于URL硬着陆。这行不通。

让我们说如果在用户组件(ES6)..为了转到路由"/users/signin"，你的组件应该如下所示:

import React, {Component} from 'react';
import { Link } from 'react-router';
export default class Users extends Component {
render(){
  return (
    <div>
      <Link to="/users/signin">Sign in</Link>
    </div>
   )
 }
}

哦，记得包括{this.props。

Answer 3

试着在嵌套的路由前面放一个/，像这样:

<Router history={ browserHistory }>
  <Route path="/" component={ App } >
    <IndexRoute component={ Indexpage } />
    <Route path="users" component= { Users } >
      <Route path="/signin" component={ Signin } />
      <Route path="/signout" component={ Signout } />
      <Route path="/signup" component={ Signup } />
    </Route>
  </Route>
</Router>

你也可以试着使用:

<Link to="/users/signin">Signin</Link>

中的Users组件导航到那些嵌套的路由。

你可以使用:

import { Link } from 'react-router'在文件的顶部

react-router文档

Answer 4

bagofcole的回答很好，但是我使用嵌套路由的问题是，调用的api路由返回的是静态html文件，而不是预期的响应。

结果是，对于那个api调用，我指定的路径在开始时缺少'/'。

  return axios.get('api/isAuthenticated')  // INCORRECT
  return axios.get('/api/isAuthenticated') // CORRECT

刷新时嵌套的路由路径没有样式化。类似地，这是由于html文件中不正确的CSS路径:

   <link rel='stylesheet' href='./stylesheets/style.css' /> // INCORRECT
   <link rel='stylesheet' href='/stylesheets/style.css' /> // CORRECT

使用React-Router太麻烦了。如果我遇到更多像这样令人费解的bug，我可能会停止使用它，或者至少使用同一个团队提供的静态路由库。