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}。 chrome状态错误：GET http://localhost:8080/users/bundle.js 404 (Not Found)

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

我为 {App} 和 {Users} 组件放置了 {this.props.children}。

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

编辑 1：我在下面包含了我的 webpack.config

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

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 太麻烦了。如果我遇到更多类似这样令人费解的错误，我可能会停止使用它，或者至少使用同一个团队提供的静态路由库。

Answer 2

您收到此错误（http://localhost:8080/users/bundle.js404（未找到））不是因为 React Router 嵌套路由的方式存在问题，而是因为您的 bundle.js 文件只能在您的路由文件夹（或第一级）访问路线）。因此它无法加载您的 javascript 包。别担心，webpack 提供了一个非常有用的解决方案。公共路径：https://webpack.js.org/guides/public-path/.

所以在你的 webpack.config 中替换：

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 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' 在文件顶部。

Docs on react-router

Answer 4

The guy who answer: alexi2

感谢上面的链接。

如果您尝试基于 URL 进行硬着陆，则使用 react-router 进行深度嵌套路由的关键似乎是。它不会起作用。

Go 假设如果在用户组件（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.children}。