Question

我在设置嵌套路由方面遇到了问题。我是React的初学者并正在探索它。我正在使用Webpack在localhost上捆绑并运行它。

项目结构： -

project
 |---build
 |     |---index_bundle.js
 |     |--_index.html
 |---src
 |     |---components
 |----webpack.config.js
 |----package.json
 |----node_modules
 |----index.html

Routes.js 文件： -

  import CarDetail from './CarDetail.jsx';

   <Router history={browserHistory}>
    <Route path='/' component={Container}>
      <IndexRoute component={IndexPage} />
      <Route path="/route1" component={Component1}/>
      <Route path="/route2" component={Component2} />
      <Route path="/route3" component={Component3} />
      <Route path="cars/:id" component={CarDetail}/>
      <Route path="/about" component={About}/>
    </Route>

  </Router>

CarDetails.jsx

import React, { Component } from 'react';

class CarDetail extends Component {
 render(){
    return (<h1>{this.props.params.id}</h1>);
  }
}

export default CarDetail

当我请求http://localhost:8080/cars/5时，它显示错误： -

webpack.config.js ： -

var webpack = require('webpack');
var HTMLWebpackPlugin= require('html-webpack-plugin');
var HTMLWebpackPluginConfig= new HTMLWebpackPlugin({
  template:__dirname +'/index.html',
  filename:'index.html',
  inject:'body'
   });
 module.exports={
    entry:['./src/app-client.js'],
    output:{
     path:__dirname+'/build',
     filename:'index_bundle.js',
     publicPath:'/'
      },
devtool: 'inline-source-map',

devServer: {
 historyApiFallback: true
 },
module:{
 loaders:[

    { test:/\.jsx?$/,
      exclude:/node_modules/,
      loader:"babel-loader",
      query:{
        presets:["react","es2015","stage-2"]
      }
    }
   ]
  },
  plugins:[HTMLWebpackPluginConfig]
 }

建立/ index.html中

  <!DOCTYPE html>
  <html>
   <head>
    <title>Working on React</title>
    <link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>
  </head>
  <body>
   <div id="react-app"></div>

  <script type="text/javascript" src="/build/index_bundle.js"></script>   <script type="text/javascript" src="/index_bundle.js"></script></body>
</html>

嵌套路由在React中不起作用

0 个答案: