CODEWITHSUNDEEP
javascriptreactjsreact-router
RBT
RBT

Reputation: 25887

Routing type doesn't change to "browserHistory" even after setting history attribute while using react-router

I'm working on basic reactJs application with routes. By default ReactJs uses hashHistory type of history to maintain history of URLs visited by the user. Here is my package.json file having version of all the dependencies I'm using:

{
  "name": "scotch-cars",
  "version": "1.0.0",
  "description": "learning routing in reactJs",
  "main": "index.js",
  "scripts": {
    "watch": "webpack -d --watch",
    "build": "webpack",
    "serve" : "serve ./public"
  },
  "author": "Rasik Bihari",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "serve": "^5.2.2",
    "webpack": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router": "^1.0.3"
  }
}

Here is my index.jsx file which is the starting point:

import React, { Component } from 'react';
import { render } from 'react-dom';
import {Router, Route, IndexRoute,browserHistory} from 'react-router';
import Main from './common/main.component.jsx'
import Home from './common/home.component.jsx'
import About from './common/about.component.jsx'
import Car from './car/car.component.jsx'

render(
    <Router>
        <Route path="/" component={Main} history={browserHistory} >
            <IndexRoute component={Home} />
            <Route path="/cars" component={Car}/>
            <Route path="/about" component={About}/>
        </Route>
    </Router>,
    document.getElementById('container')
);

As you can see in the code snippet above I've set history={browserHistory}. But as soon as my dev server starts and I browse the home path then reactJs is still appending hashes at the end of the URL (shown in yellow) which means it is using hashHistory type of history.

enter image description here

Can someone point out the mistake here?

Here is my webpack.config.js which loads the index.jsx file shown above:

var webpack = require('webpack');
var path = require('path');
console.log(__dirname);
var BUILD_DIR = path.resolve(__dirname, 'public');
console.log(BUILD_DIR);
var APP_DIR = path.resolve(__dirname, 'src');
console.log(APP_DIR);

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },

  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
};

module.exports = config;

Here is the public/index.html file:

<html>
    <head>
        <!--Stylesheet-->
        <!--<link rel="stylesheet" href="style.css">-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
        <base href="/">
    </head>
    <body>
        <!--Container for React rendering-->
        <div id="container"></div>
        <!--Bundled file-->
        <script src="bundle.js"></script>
    </body>
</html>

Code for ./common/main.component.jsx

import React, {Component} from 'react';

class Main extends Component {
    render(){
        return(
            <div>
                <nav className="navbar navbar-default">
                    <div className="container-fluid">
                        <div className="navbar-header">
                            <a className="navbar-brand" href="#">Scotch Cars</a>
                        </div>
                        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul className="nav navbar-nav">
                                <li className="active"><a href="#">Link <span className="sr-only">(current)</span></a></li>
                                <li><a href="#">Link</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div className="container">
                    {this.props.children}
                </div>
            </div>
        );
    }
}

export default Main

Update 1: Moving the history={browserHistory} attribute from Route tag to Router tag has no effect on the desired output.

Upvotes: 1

Views: 70

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281676

History object is not given to the Route but the Router

This should work 

 <Router history={browserHistory}>
    <Route path="/" component={Main}  >
        <IndexRoute component={Home} />
        <Route path="/cars" component={Car}/>
        <Route path="/about" component={About}/>
    </Route>
</Router>,

Also upgrade to a higher version of React router at least to v2.0.0.

You can do that by deleting the entry for react-router in package.json and then installing it as

npm install -S [email protected]

However, if you are just kickstarting you app, you should go with the latest version of react-router. i.e. v4.1.1

Below is the training doc for configuring the same : https://reacttraining.com/react-router/web/api/BrowserRouter

Upvotes: 3

Related Questions