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}中的剩余网址时，例如{signin}，{signout}，{signup}。铬状态错误：GET http://localhost:8080/users/bundle.js 404 (Not Found)

但是当我尝试为用户中的一个嵌套组件更改Route to 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

您收到此错误（http://localhost:8080/users/bundle.js 404（未找到））并不是因为React Router的嵌套路径存在问题，而是因为您的bundle.js文件只能在您的路径文件夹中访问（或第一级路线）。因此它无法加载您的JavaScript包。不用担心，web pack为此提供了非常有用的解决方案。公共路径：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 2

尝试将/放在嵌套路线的前面，如下所示：

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

The guy who answer: alexi2

感谢上面的链接。

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

Go Let's say if if in user component（ES6）..为了转到路线＆＃34; / users / signin＆＃34;，您的组件应如下所示：

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 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：嵌套路由错误

4 个答案: