Reputation: 4393
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
Reputation: 6078
You have a typo in <Router histrory={browserHistory}>
- history
Upvotes: 1