0

I am having a problem in setting up nested routes.I am a beginner in React and exploring it.I am using Webpack for bundling and ruuning it on localhost.

Project Structure:-

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

Routes.js file:-

  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

When I am requesting http://localhost:8080/cars/5 ,it is showing an error:- enter image description here

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

build/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>
Improve this question
4
  • The rest of the routes are working fine? Commented Dec 2, 2016 at 10:05
  • Can you show the HTML where you are loading in your index_bundle.js Commented Dec 2, 2016 at 10:08
  • The routes for components which I am defining in the same file are working fine but if I import some component and define a route for it is leading me to above error @RMontes13 Commented Dec 2, 2016 at 11:22
  • The rest of routes are working fine.What i can sense the problem is when i browse localhost:8080/cars/5 ,webpack is loading localhost:8080/cars/index_bundle.js while the actual path is localhost:8080/index_bundle.js @RMontes13 Commented Dec 2, 2016 at 11:42
Related questions
27
React router - Nested routes not working
0
React router and nested routes
0
React nested routing
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.