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)

但是当我尝试将用户中嵌套组件之一的路由更改为 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

尝试在嵌套路由前放置一个 /，如下所示：

<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 2

The guy who answer: alexi2

感谢并感谢上面的 link。

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

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}。

Answer 3

您遇到此错误 (http://localhost:8080/users/bundle.js 404 (Not Found)) not because there is an issue with React Router's way of nesting routes, but because your bundle.js file is only accessible at your route folder (or first level of routes). Thus it cannot load your javascript bundle. Don't worry, web pack provides a very useful fix for this. Public path: 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 or http://localhost:8080/users 进行热刷新，您的浏览器都能够加载您的 bundle.js。

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

React-router：嵌套路由错误

React-router: nested routes error

reactjs

webpack

react-router

react-redux