React Routing Error

Question

My page does not get routed according to the routes specified. My files are as such. Currently my Home.js and Main.js works well. But when I try to route to playerOne, nothing happens. ie. the page remains the same without any change.

I am completely new to react and am trying to learn. I am not sure where I have erred. Can someone please help me?? Thanks in advance.

Routes.js

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var hashHistory = ReactRouter.hashHistory;
var IndexRoute = ReactRouter.IndexRoute;
var Main = require('../components/Main');
var Home = require("../components/Home");
var PromptContainer = require('../containers/PromptContainer');

var routes = (
  <Router history={hashHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Home} />
      <Route path='playerOne' component={PromptContainer} />
      <Route path='playerTwo/:playerOne' component={PromptContainer} />
    </Route>
  </Router>
);

module.exports = routes;

PrompContainer.js

    var React= require('react');

var PromptContainer= React.createClass({
    render: function(){
        console.log(this); 
      return(
         <div className="jumbotron col-sm-6 col-sm-offset-3 text-center">
            <h1>Some Text</h1>
            <div className="col-sm-12">
               <form>
                  <div className="form-group">
                     <input
                        type="text"
                        placeholder="Username"
                        className="form-control"   
                     />
                  </div>
                  <div className="form-group col-sm-4 col-sm-offset-4">
                     <button 
                        className="btn btn-block btn-success"
                        type="submit"> 
                           Continue
                     </button>
                  </div>
               </form>
            </div>
         </div>
        )
    }
});

module.exports= PromptContainer;

Main.js

var React=require('react');

var Main=React.createClass({
    render:function(){
        return(
            <div className="main-container">
                {this.props.children}   
            </div>  
        )
    }
});

module.exports= Main;

Home.js

var React=require('react');

var Home=React.createClass({
    render:function(){
        return(
            <div>
                Hello From Home!!!
            </div>  
        )
    }
});

module.exports= Home;

index.js

var React=require('react');
var ReactDOM=require('react-dom');
var routes=require('./config/routes');

ReactDOM.render(
    routes,
    document.getElementById("app")
);

My entry point is the index.js file. My directory structure is some thing like this-

>app
    >components
       Home.js
       Main.js
    >config
       routes.js
    >containers
       PromptContainer.js
    index.js
    index.html
    >dist
    >node_modules
    package.json
    webpack.config.js

My package.json file is -

{
    "name": "react",
    "version": "1.0.0",
    "description": "Learning React",
    "main": "index.js",
    "scripts": {
        "test": "ava 'app/**/*.test.js' --verbose --require ./other/setup-ava-tests.js",
        "production": "webpack -p",
        "start": "webpack-dev-server"
    },
    "dependencies": {
        "jquery": "^3.0.0",
        "npm": "^3.9.6",
        "react": "^15.1.0",
        "react-dom": "^15.1.0",
        "react-router": "^2.4.1",
        "webpack": "^1.13.1"
    },
    "devDependencies": {
        "babel-core": "^6.9.1",
        "babel-loader": "^6.2.4",
        "babel-preset-react": "^6.5.0",
        "coffee-loader": "^0.7.2",
        "html-webpack-plugin": "^2.21.0",
        "webpack": "^1.13.1",
        "webpack-dev-server": "^1.14.1"
    },
    "author": "",
    "license": "ISC"
}

My Webpack Config is

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + "/app/index.html",
    filename: "index.html",
    inject: "body"
});

module.exports = {

    entry: [
        './app/index.js'
    ],

    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },

    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    plugins: [HtmlWebpackPluginConfig]

};

Answer 1

You are not able to Route to PromptContainer because you have'nt specified the link to route to the specfied component. In your Main.js specify the Link to a particular route as

var React=require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
var Main=React.createClass({
    render:function(){
        return(
            <div>
            <li><Link to="playerOne">Click to PlayerOne</Link></li>
            <li><Link to="/">Click to Home</Link></li>
            <div className="main-container">
                {this.props.children}   
            </div>  
            </div>
        )
    }
});

module.exports= Main;

I hope this works.

You can check that your routes are working by visiting link

http://localhost:8080/#/playerOne

Also in your to run your code I had to make a change to the webpack.config.js by including presets

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + "/index.html",
    filename: "index.html",
    inject: "body"
});

module.exports = {

    entry: [
        './index.js'
    ],

    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ['react']
            }
        }]
    },

    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    plugins: [HtmlWebpackPluginConfig]

};

I hope this solution meets your needs.