Raman Choudhary
Raman Choudhary

Reputation: 4393

URL not changing in React Routes

I'm trying to implement React-Router in my application. I've initialized router in index.js and it works fine. But it doesn't change the URL in the browser and throws this error in console.

Warning: [react-router] `Router` no longer defaults the history prop to hash history. Please use the `hashHistory` singleton instead.

Index.js

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory,IndexRoute } from 'react-router';

// Custom Components
import App from './components/Main';
import Dashboard from  './components/containers/Dashboard';
import Settings from  './components/containers/Settings';
import Workspace from  './components/containers/Workspace';
import Main from  './components/Main';

ReactDOM.render((

  <Router histrory={browserHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={Dashboard}></IndexRoute>
      <Route path="/workspace" component={Workspace}></Route>
      <Route path="/dashboard" component={Dashboard}></Route>
      <Route path="/settings" component={Settings}></Route>
    </Route>
  </Router>


), document.getElementById('app'));

Main.js

require('normalize.css/normalize.css');
require('styles/App.scss');

//Import Custom Components
import React from 'react';
import { Router, Route,Link, browserHistory } from 'react-router';

import Sidenav from  './containers/Sidenav';
import  Page from './Page';


class AppComponent extends React.Component {
  render() {
    return (
      <div>
        <Sidenav />
        <div className="page-wrap">
          {this.props.children}
        </div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};
export default AppComponent;

Route is working fine and Component is getting rendered correctly. Please suggest to bind this with URLs.

Thank you in advance. :D

Upvotes: 1

Views: 903

Answers (1)

Dmitriy Nevzorov
Dmitriy Nevzorov

Reputation: 6078

You have a typo in <Router histrory={browserHistory}> - history

Upvotes: 1

Related Questions