React-router 2.0: programmatically change the route (URL does not update)

Question

I'm having problems with software routing with response-router 2.0

Documents say use

this.context.router.push('/test'); 

This moves correctly, but the URL of my browser remains unchanged and does not update, even if the components from another page (/ test) were displayed and the route change was successful.

How can I get the URL to update?

Answer 1

this.props.history.push('/some/path'); outdated.

Now we must use the following:

 import { browserHistory } from 'react-router' 

Then, wherever you go - somewhere in your code - do:

 browserHistory.push('/some/path'); 

Here's how I set up my routes.jsx file, which handles my routing mechanism:

 //Require react. import React from "react"; //Require routing variables. import { Router, Route, IndexRoute, browserHistory } from "react-router"; //Example components. import MainComponent from "../containers/main.js"; import HomeComponent from "../containers/home.js"; var Routes = ( <Router history={browserHistory}> <Route path="/" component={MainComponent}> <IndexRoute component={HomeComponent} /> <Route path="/example" component={ExampleComponent} /> </Route> </Router> ); module.exports = Routes; 

I am using webpack. In webpack, I also have the following:

 ... bla ... bla... bla ... module: { }, devServer: { historyApiFallback: true }, plugins: [ ] ... bla ... bla... bla ... 

---

UPDATE 04-Jan-2018:

[Disclaimer: I am now using TypeScript instead of ES6]

Here's how I do it now: react ^15.6.1 and react-dom ^15.6.1

index.tsx

 import * as React from "react"; import * as ReactDOM from "react-dom"; import Routes from "./configuration/routes"; ReactDOM.render( Routes, document.getElementById("app") ); 

routes.tsx

 import * as React from "react"; import { BrowserRouter, HashRouter } from 'react-router-dom'; import App from "../containers/App"; let Routes: any = ( // <BrowserRouter> // <App someDefaultValue/> // </BrowserRouter> // HashRouter adds the # in front of our paths :) - check the browser URL to see. <HashRouter> <App someDefaultValue/> </HashRouter> ); export default Routes; 

App.tsx

 import * as React from "react"; import { Switch, Route } from 'react-router-dom' import Header from "../components/header-component/header"; import Main from "../components/main-component/main"; import Footer from "../components/footer-component/footer"; interface IComponentProps { someDefaultValue: boolean; } interface IComponentState { loading: boolean; } class App extends React.Component<IComponentProps, IComponentState> { constructor() { super(); this.state = { loading: true }; } render() { const { loading } = this.state; if(loading) { //Render something or something else.. } return ( <div className="app-container"> <Switch> <Route path='/' component={Header}/> </Switch> <Switch> <Route path='/' component={Main}/> </Switch> <Switch> <Route path='/' component={Footer}/> </Switch> </div> ); } } export default App; 

Then you can use something like this to put navigation on menu items when you click (or something else ...) menu.tsx

 import * as React from "react"; import { Link } from 'react-router-dom' class Menu extends React.Component { render() { return ( <div> <Link to='/home'> <div>Home</div> </Link> <Link to='/about'> <div>About</div> </Link> </div>); } } export default Menu; 

To navigate the "software":

 this.props.history.push('/wherever'); 

The reason I use HashRouter is because I noticed with BrowserRouter that it breaks when people save bookmarks, etc. HashRouter allows my users to smoothly navigate my site :)

If I need to show how the BrowserRouter works, I can - just ask - it's almost the same - but you will see that it behaves only when navigating a site. When you move from the outside, this happens when errors occur.

Oh yes, I almost forgot - I really have not tested this, but I suppose we still need

 devServer: { historyApiFallback: true } 

in our webpack.config.js ? I would not know:) ... but he is there in mine right now ...

Answer 2

this answer may be what you are looking for it says to use

 this.props.history.push('/some/path'); 

when inside a component