In the current version of React Router (v3) I can accept a server response and use `browserHistory.push` to go to the appropriate response page. However, this isn&#39;t available in v4, and I&#39;m not sure what the appropriate way to handle this is.

In this example, using Redux, _components/app-product-form.js_ calls `this.props.addProduct(props)` when a user submits the form. When the server returns a success, the user is taken to the Cart page.

    // actions/index.js
    export function addProduct(props) {
      return dispatch =&gt;
        axios.post(`${ROOT_URL}/cart`, props, config)
          .then(response =&gt; {
            dispatch({ type: types.AUTH_USER });
            localStorage.setItem(&#39;token&#39;, response.data.token);
            browserHistory.push(&#39;/cart&#39;); // no longer in React Router V4
          });
    }

How can I make a redirect to the Cart page from function for React Router v4?

How to push to History in React Router v4?

I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data):

&gt; http://localhost/app/path/to/page &lt;= render the page
&gt; http://localhost/app/path/to/page/pathParam &lt;= render the page with
&gt; some data according to the pathParam

In my react router I have the following paths, in order to support the two options (this is a simplified example):

    &lt;Router history={history}&gt;    
       &lt;Route path=&quot;/path&quot; component={IndexPage}&gt;
          &lt;Route path=&quot;to/page&quot; component={MyPage}/&gt;
          &lt;Route path=&quot;to/page/:pathParam&quot; component={MyPage}/&gt;
       &lt;/Route&gt;    
    &lt;/Router&gt;


My question is, can we declare it in **one** route? If I add only the second row then the route without the parameter is not found.

**EDIT#1:**

The solution mentioned [here][1] about the following syntax did not work for me, is it a proper one? Does it exist in the documentation?

    &lt;Route path=&quot;/product/:productName/?:urlID?&quot; handler={SomeHandler} /&gt;

My react-router version is: 1.0.3

  [1]: https://stackoverflow.com/questions/32773911/optional-react-router-parameter

React Router with optional path parameter

I have just replaced `react-router` from v3 to v4.  
But I am not sure how to programmatically navigate in the member function of a `Component`.
i.e in `handleClick()` function I want to navigate to `/path/some/where` after processing some data.
I used to do that by:

&lt;!-- language: lang-js --&gt;

    import { browserHistory } from &#39;react-router&#39;
    browserHistory.push(&#39;/path/some/where&#39;)

But I can&#39;t find such interfaces in v4.  
How can I navigate using v4?


Programmatically navigate using react router V4

I am currently struggling with nesting routes using react router v4.

The closest example was the route config in the 
[React-Router v4 Documentation][1].

I want to split my app in 2 different parts.

A frontend and an admin area.

I was thinking about something like this:

    &lt;Match pattern=&quot;/&quot; component={Frontpage}&gt;
      &lt;Match pattern=&quot;/home&quot; component={HomePage} /&gt;
      &lt;Match pattern=&quot;/about&quot; component={AboutPage} /&gt;
    &lt;/Match&gt;
    &lt;Match pattern=&quot;/admin&quot; component={Backend}&gt;
      &lt;Match pattern=&quot;/home&quot; component={Dashboard} /&gt;
      &lt;Match pattern=&quot;/users&quot; component={UserPage} /&gt;
    &lt;/Match&gt;
    &lt;Miss component={NotFoundPage} /&gt;

The frontend has a different layout and style than the admin area. So within the frontpage the route home, about and so one should be the child routes.

**/home** should be rendered into the Frontpage component and **/admin/home** should be rendered within the Backend component. 

I tried some variations but I always ended in not hitting /home or /admin/home.


**Edit - 19.04.2017**

Because this post has a lot of views right now I updated it with the final solution. I hope it helps someone.

**Edit - 08.05.2017**

Removed old solutions

**Final solution:**

This is the final solution I am using right now. This example also has a global error component like a traditional 404 page.


    import React, { Component } from &#39;react&#39;;
    import { Switch, Route, Redirect, Link } from &#39;react-router-dom&#39;;
    
    const Home = () =&gt; &lt;div&gt;&lt;h1&gt;Home&lt;/h1&gt;&lt;/div&gt;;
    const User = () =&gt; &lt;div&gt;&lt;h1&gt;User&lt;/h1&gt;&lt;/div&gt;;
    const Error = () =&gt; &lt;div&gt;&lt;h1&gt;Error&lt;/h1&gt;&lt;/div&gt;
    
    const Frontend = props =&gt; {
      console.log(&#39;Frontend&#39;);
      return (
        &lt;div&gt;
          &lt;h2&gt;Frontend&lt;/h2&gt;
          &lt;p&gt;&lt;Link to=&quot;/&quot;&gt;Root&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/user&quot;&gt;User&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin&quot;&gt;Backend&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/the-route-is-swiggity-swoute&quot;&gt;Swiggity swooty&lt;/Link&gt;&lt;/p&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&#39;/&#39; component={Home}/&gt;
            &lt;Route path=&#39;/user&#39; component={User}/&gt;
            &lt;Redirect to={{
              state: { error: true }
            }} /&gt;
          &lt;/Switch&gt;
          &lt;footer&gt;Bottom&lt;/footer&gt;
        &lt;/div&gt;
      );
    }
    
    const Backend = props =&gt; {
      console.log(&#39;Backend&#39;);
      return (
        &lt;div&gt;
          &lt;h2&gt;Backend&lt;/h2&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin&quot;&gt;Root&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin/user&quot;&gt;User&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/&quot;&gt;Frontend&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to=&quot;/admin/the-route-is-swiggity-swoute&quot;&gt;Swiggity swooty&lt;/Link&gt;&lt;/p&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&#39;/admin&#39; component={Home}/&gt;
            &lt;Route path=&#39;/admin/user&#39; component={User}/&gt;
            &lt;Redirect to={{
              state: { error: true }
            }} /&gt;
          &lt;/Switch&gt;
          &lt;footer&gt;Bottom&lt;/footer&gt;
        &lt;/div&gt;
      );
    }
    
    class GlobalErrorSwitch extends Component {
      previousLocation = this.props.location
    
      componentWillUpdate(nextProps) {
        const { location } = this.props;
    
        if (nextProps.history.action !== &#39;POP&#39;
          &amp;&amp; (!location.state || !location.state.error)) {
            this.previousLocation = this.props.location
        };
      }
    
      render() {
        const { location } = this.props;
        const isError = !!(
          location.state &amp;&amp;
          location.state.error &amp;&amp;
          this.previousLocation !== location // not initial render
        )
    
        return (
          &lt;div&gt;
            {          
              isError
              ? &lt;Route component={Error} /&gt;
              : &lt;Switch location={isError ? this.previousLocation : location}&gt;
                  &lt;Route path=&quot;/admin&quot; component={Backend} /&gt;
                  &lt;Route path=&quot;/&quot; component={Frontend} /&gt;
                &lt;/Switch&gt;}
          &lt;/div&gt;
        )
      }
    }
    
    class App extends Component {
      render() {
        return &lt;Route component={GlobalErrorSwitch} /&gt;
      }
    }
    
    export default App;


  [1]: https://react-router.now.sh/



Nested routes with react router v4 / v5

I&#39;d like to display a `title` in `&lt;AppBar /&gt;` that is somehow passed in from the current route. 

In React Router v4, how would `&lt;AppBar /&gt;` be able to get the current route passed into it&#39;s `title` prop? 

      &lt;Router basename=&#39;/app&#39;&gt;
        &lt;main&gt;
          &lt;Menu active={menu} close={this.closeMenu} /&gt;
          &lt;Overlay active={menu} onClick={this.closeMenu} /&gt;
          &lt;AppBar handleMenuIcon={this.handleMenuIcon} title=&#39;Test&#39; /&gt;
          &lt;Route path=&#39;/customers&#39; component={Customers} /&gt;
        &lt;/main&gt;
      &lt;/Router&gt;

Is there a way to pass a custom title from a custom `prop` on `&lt;Route /&gt;`?

React Router v4 - How to get current route?

I have a couple of buttons that acts as routes. Everytime the route is changed, I want to make sure the button that is active changes.

Is there a way to listen to route changes in react router v4?

How to listen to route changes in react router v4?

I was trying to implement authenticated routes but found that React Router 4 now prevents this from working: 

    &lt;Route exact path=&quot;/&quot; component={Index} /&gt;
    &lt;Route path=&quot;/auth&quot; component={UnauthenticatedWrapper}&gt;
        &lt;Route path=&quot;/auth/login&quot; component={LoginBotBot} /&gt;
    &lt;/Route&gt;
    &lt;Route path=&quot;/domains&quot; component={AuthenticatedWrapper}&gt;
        &lt;Route exact path=&quot;/domains&quot; component={DomainsIndex} /&gt;
    &lt;/Route&gt;

The error is: 

&gt; Warning: You should not use `&lt;Route component&gt;` and `&lt;Route children&gt;` in the same route; `&lt;Route children&gt;` will be ignored

In that case, what&#39;s the correct way to implement this? 

It appears in `react-router` (v4) docs, it suggests something like 

    &lt;Router&gt;
        &lt;div&gt;
        &lt;AuthButton/&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;Link to=&quot;/public&quot;&gt;Public Page&lt;/Link&gt;&lt;/li&gt;
            &lt;li&gt;&lt;Link to=&quot;/protected&quot;&gt;Protected Page&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;Route path=&quot;/public&quot; component={Public}/&gt;
        &lt;Route path=&quot;/login&quot; component={Login}/&gt;
        &lt;PrivateRoute path=&quot;/protected&quot; component={Protected}/&gt;
        &lt;/div&gt;
    &lt;/Router&gt;

But is it possible to achieve this while grouping a bunch of routes together? 

----- 

After some research, I came up with this: 

    import React, {PropTypes} from &quot;react&quot;
    import {Route} from &quot;react-router-dom&quot;
    
    export default class AuthenticatedRoute extends React.Component {
      render() {
        if (!this.props.isLoggedIn) {
          this.props.redirectToLogin()
          return null
        }
        return &lt;Route {...this.props} /&gt;
      }
    }
    
    AuthenticatedRoute.propTypes = {
      isLoggedIn: PropTypes.bool.isRequired,
      component: PropTypes.element,
      redirectToLogin: PropTypes.func.isRequired
    }

Is it correct to dispatch an action in `render()`? It feels wrong. It doesn&#39;t really seem correct with `componentDidMount` or some other hook, either.

How to implement authenticated routes in React Router 4?

I have to implement some business logic depending on browsing history.

What I want to do is something like this:

    reactRouter.onUrlChange(url =&gt; {
       this.history.push(url);
    });

Is there any way to receive a callback from react-router when the URL gets updated?

Detect Route Change with react-router

Besides the ability to set an &quot;activeClassName&quot; and &quot;activeStyle&quot; on NavLink, is there any reason to use **NavLink** over **Link** when creating links to other routes on non-navigational elements (ie. not main nav in header or footer) on your site that don&#39;t need an active state/class? 

React Router v4 &lt;NavLink&gt; vs &lt;Link&gt; benefits

Trying to figure out how can I go back to the previous page. I am using `[react-router-v4][1]`

This is the code I have configured in my first landing page:

    &lt;Router&gt;
      &lt;div&gt;
        &lt;Link to=&quot;/&quot;&gt;&lt;div className=&quot;routerStyle&quot;&gt;&lt;Glyphicon glyph=&quot;home&quot; /&gt;&lt;/div&gt;&lt;/Link&gt;
        &lt;Route exact path=&quot;/&quot; component={Page1}/&gt;
        &lt;Route path=&quot;/Page2&quot; component={Page2}/&gt;
        &lt;Route path=&quot;/Page3&quot; component={Page3}/&gt;
      &lt;/div&gt;
    &lt;/Router&gt;


In order to forward to subsequent pages, I simply do:

    this.props.history.push(&#39;/Page2&#39;);


However, how can I go back to previous page? 
Tried few things like mentioned below but no luck:
1. `this.props.history.goBack();`

Gives error: 

&gt; TypeError: null is not an object (evaluating &#39;this.props&#39;)

2. `this.context.router.goBack();`

Gives error: 
 
&gt; TypeError: null is not an object (evaluating &#39;this.context&#39;)


3. `this.props.history.push(&#39;/&#39;);`

Gives error: 

&gt; TypeError: null is not an object (evaluating &#39;this.props&#39;)
  

Posting the `Page1` code here below:

    import React, {Component} from &#39;react&#39;;
    import {Button} from &#39;react-bootstrap&#39;;
    
    class Page1 extends Component {
      constructor(props) {
        super(props);
        this.handleNext = this.handleNext.bind(this);
      }
    
    
      handleNext() {
        this.props.history.push(&#39;/page2&#39;);
      }
    
      handleBack() {
        this.props.history.push(&#39;/&#39;);
      }
    
    
      /*
       * Main render method of this class
       */
      render() {
        return (
          &lt;div&gt;
            {/* some component code */}
    
    
            &lt;div className=&quot;navigationButtonsLeft&quot;&gt;
              &lt;Button onClick={this.handleBack} bsStyle=&quot;success&quot;&gt;&amp;lt; Back&lt;/Button&gt;
            &lt;/div&gt;
            &lt;div className=&quot;navigationButtonsRight&quot;&gt;
              &lt;Button onClick={this.handleNext} bsStyle=&quot;success&quot;&gt;Next &amp;gt;&lt;/Button&gt;
            &lt;/div&gt;
    
          &lt;/div&gt;
        );
      }
    
    
    export default Page1;


[1]: https://reacttraining.com/react-router/web/guides/philosophy


react-router (v4) how to go back?

I&#39;m using react-router-dom 4.0.0-beta.6 in my project.
I have a code like following:

&lt;!-- language: lang-jsx --&gt;

    &lt;Route exact path=&quot;/home&quot; component={HomePage}/&gt;

And I want to get query params in `HomePage` component.
I&#39;ve found `location.search` param, which looks like this: `?key=value`, so it is unparsed.

What is the right way to get query params with react-router v4?

How to get query parameters in react-router v4

There seems to be some confusion with what to use over the other:

* `&lt;Link to=&#39;/some/path&#39;&gt;`
* `&lt;Redirect to=&#39;/some/path&#39;/&gt;`
* `history.push(&#39;/some/path&#39;)`

I have been using React/Router for a little while now, and different posts/answers say different things regarding when to use these, and sometimes they don&#39;t line up with what someone else said. So I think I need some clarification on this.

### From what I understand about `Link` and this [documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md) it: 

&gt; Provides declarative, accessible navigation around your application.

### From what I understand about `Redirect` and this [documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md) it:

&gt; Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

It seems like all the posts I have read almost everyone uses `Redirect` to navigate around there application, and no one ever recommends using `Link` like in this [post](https://stackoverflow.com/questions/46757676/in-react-is-it-always-better-to-render-a-redirect-than-use-this-props-history-pu?rq=1).

Now `history` can do the same thing as `Link` and `Redirect` except I have a history stack trace.

**Question 1:** When would I want to use `Link` vs `Redirect`, what&#39;s the use case over the other?


**Question 2:** Since `history` can route a user to another location in-app with the added bonus of the history stack, should I always just use the history object when routing?

**Question 3:** If I want to route *outside* of the app, what&#39;s the best method to do so? Anchor tag, Window.location.href, Redirect, Link, none of the above?

React-Router - Link vs Redirect vs History

I&#39;ve read many things about react-router v4 and the npm history library to this point, but none seems to be helping me.  

My code is functioning as expected up to the point when it should navigate and do a simple redirect when the url is changed using the history.push() method.  The URL IS changing to the specified route, but not doing the redirect on the button push.  Thanks in advance, still learning react-router...    

I would like for the button push to do a simple redirect without the {forceRefresh:true}, which then reloads the whole page.   

    import React from &#39;react&#39;;
    import createBrowserHistory from &#39;history/createBrowserHistory&#39;;
    
    const history = createBrowserHistory({forceRefresh:true});
    
    export default class Link extends React.Component {
      onLogout() {
        history.push(&quot;/signup&quot;);
      }
      render() {
          return(
            &lt;div&gt;
              &lt;h1&gt;Your Links&lt;/h1&gt;
              &lt;button onClick={this.onLogout.bind(this)}&gt;Log Out&lt;/button&gt;
            &lt;/div&gt;
          )
      }
    }



React history.push() is updating url but not navigating to it in browser

I&#39;m looking for a way to modify the page title when React-Router v4+ changes locations. I used to listen for a location change action in Redux and check that route against a `metaData` object.

When using React-Router v4+, there&#39;s no fixed routes list. In fact, various components around the site could use `Route` with the same path string. That means old method I used won&#39;t work anymore.

Is there a way I can update the page title by calling actions when certain major routes are changed or is there a better a better method to update the site&#39;s metadata?

Is there a way to modify the page title with React-Router v4+?

Ok, I&#39;m fed up trying.  
The `onEnter` method doesn&#39;t work. Any idea why is that? 

    // Authentication &quot;before&quot; filter
    function requireAuth(nextState, replace){
      console.log(&quot;called&quot;); // =&gt; Is not triggered at all 
      if (!isLoggedIn()) {
        replace({
          pathname: &#39;/front&#39;
        })
      }
    }
    
    // Render the app
    render(
      &lt;Provider store={store}&gt;
          &lt;Router history={history}&gt;
            &lt;App&gt;
              &lt;Switch&gt;
                &lt;Route path=&quot;/front&quot; component={Front} /&gt;
                &lt;Route path=&quot;/home&quot; component={Home} onEnter={requireAuth} /&gt;
                &lt;Route exact path=&quot;/&quot; component={Home} onEnter={requireAuth} /&gt;
                &lt;Route path=&quot;*&quot; component={NoMatch} /&gt;
              &lt;/Switch&gt;
            &lt;/App&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;,
      document.getElementById(&quot;lf-app&quot;)

Edit: 

The method is executed when I call `onEnter={requireAuth()}`, but obviously that is not the purpose, and I also won&#39;t get the desired parameters. 

onEnter not called in React-Router

I&#39;m trying to set up some nested routes to add a common layout. Check the code out:

      &lt;Router&gt;
        &lt;Route component={Layout}&gt;
          &lt;div&gt;
            &lt;Route path=&#39;/abc&#39; component={ABC} /&gt;
            &lt;Route path=&#39;/xyz&#39; component={XYZ} /&gt;
          &lt;/div&gt;
        &lt;/Route&gt;
      &lt;/Router&gt;

While this works perfectly fine, I still get the warning:

&gt; Warning: You should not use &amp;lt;Route component&amp;gt; and &amp;lt;Route children&amp;gt; in the same
&gt; route; &lt;Route children&gt; will be ignored

Nested Routes in React Router v4

I&#39;m trying to use react router with TypeScript. However, I have certain problems using withRouter function. On the last line, I&#39;m getting pretty weird error:

    Argument of type &#39;ComponentClass&lt;{}&gt;&#39; is not assignable to parameter of type &#39;StatelessComponent&lt;RouteComponentProps&lt;any&gt;&gt; | ComponentClass&lt;RouteComponentProps&lt;any&gt;&gt;&#39;.
      Type &#39;ComponentClass&lt;{}&gt;&#39; is not assignable to type &#39;ComponentClass&lt;RouteComponentProps&lt;any&gt;&gt;&#39;.
        Type &#39;{}&#39; is not assignable to type &#39;RouteComponentProps&lt;any&gt;&#39;.
          Property &#39;match&#39; is missing in type &#39;{}’


Code looks like:




    import * as React from &#39;react&#39;;
    import { connect } from &#39;react-redux&#39;;
    import { RouteComponentProps, withRouter } from &#39;react-router-dom&#39;;
    
    interface HomeProps extends RouteComponentProps&lt;any&gt; {
    }
    
    interface HomeState { }
    
    class Home extends React.Component&lt;HomeProps, HomeState&gt; {
      constructor(props: HomeProps) {
        super(props);
      }
      public render(): JSX.Element {
        return (&lt;span&gt;Home&lt;/span&gt;);
      }
    }
    
    const connectModule = connect(
      (state) =&gt; ({
        // Map state to props
      }),
      {
        // Map dispatch to props
      })(Home);
      
    export default withRouter(connectModule);



react-router-dom with TypeScript

How to implement conditional routing i.e. if and only if some conditions satisfies, then routing should occur.
For example, if and only if the user enters the correct credentials, login should be successful and the user should be able to see the welcome page.

If we directly hit some URL like `localhost:8080/welcome`, that should not be navigated to welcome page. The welcome page should only be displayed after login.

How to achieve this, can anyone help me please?

&lt;!-- language-all: lang-js --&gt;

App.js

    import React, { Component } from &#39;react&#39;;
    import Header from &#39;./Header&#39;;
    
    class App extends Component{
      render(){
       return(
         &lt;div&gt;
           &lt;Header /&gt;
         &lt;/div&gt;
       );
      }
    }
    export default App;

Header.js

    import React, { Component } from &#39;react&#39;;
    import {Link} from &#39;react-router-dom&#39;;
    import Login from &#39;./Login&#39;;
    import SignUp from &#39;./SignUp&#39;;
    
    class Header extends Component{
    render(){
      return(
        &lt;div&gt;
        &lt;nav class=&quot;navbar navbar-default&quot;&gt;
         &lt;div class=&quot;container-fluid&quot;&gt;
         &lt;ul class=&quot;nav navbar-nav&quot;&gt;
          &lt;li&gt;&lt;Link to={Login}&gt;Login&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to={Login}&gt;SignUp&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/nav&gt;
       
        &lt;/div&gt;
       );
     } 
    }

    export default Header;

AllRoutes.js
 
    import React, { Component } from &#39;react&#39;;
    import { Switch, Route } from &#39;react-router-dom&#39;;
    import Login from &#39;./Login&#39;;
    import SignUp from &#39;./SignUp&#39;;
    import Welcome from &#39;./Welcome&#39;;

    class AllRoutes extends Component{
     render(){
       return(
         &lt;Switch&gt; 
           &lt;Route exact path=&quot;/login&quot; component={Login} /&gt;
           &lt;Route exact path=&quot;/signup&quot; component={SignUp} /&gt;
           &lt;Route exact path=&quot;/Welcome&quot; component={Welcome} /&gt;
         &lt;/Switch&gt;
       );
      }
     }
     export default AllRoutes;

Welcome.js

    import React, { Component } from &#39;react&#39;; 
   
    class Welcome extends Component{
    render(){
     return(
      &lt;div&gt;
       &lt;h2&gt;Welcome to MainPage..&lt;/h2&gt;
      &lt;/div&gt;
      );
     }
    }
    export default Welcome;

Simple Conditional Routing in Reactjs

The new react-router syntax uses the `Link` component to move around the routes. But how could this be integrated with `material-ui`?

In my case, I&#39;m using tabs as the main navigation system, So in theory I should have something like this:

&lt;!-- language: react --&gt;

    const TabLink = ({ onClick, href, isActive, label }) =&gt; 
      &lt;Tab
        label={label}
        onActive={onClick}
      /&gt;

    

    export default class NavBar extends React.Component {
      render () {
        return (
          &lt;Tabs&gt;
            &lt;Link to=&quot;/&quot;&gt;{params =&gt; &lt;TabLink label=&quot;Home&quot; {...params}/&gt;}&lt;/Link&gt;
            &lt;Link to=&quot;/shop&quot;&gt;{params =&gt; &lt;TabLink label=&quot;shop&quot; {...params}/&gt;}&lt;/Link&gt;
            &lt;Link to=&quot;/gallery&quot;&gt;{params =&gt; &lt;TabLink label=&quot;gallery&quot; {...params}/&gt;}&lt;/Link&gt;
          &lt;/Tabs&gt;
        )
      }
    }

But when it renders, material-ui throws an error that the child of `Tabs` must be a `Tab` component. What could be the way to proceed? How do I manage the `isActive` prop for the tab?

Thanks in advance

Material-UI&#39;s Tabs integration with react router 4?

In react-router v3 we had activeStyle and activeClassName to style active Link

we could do something like this

      &lt;div id=&quot;tags-container&quot;&gt;
        {tags.map(t =&gt;
          &lt;Link
            className=&quot;tags&quot;
            activeStyle={{ color: &#39;red&#39; }}
            to={t.path}
          &gt;
            {t.title}
          &lt;/Link&gt;
        )}
      &lt;/div&gt;



I wanna know how can I do same thing in v4?

How can I style active Link in react-router v4?


I was reading [react-router-redux examples](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux/examples) and I confused,
what is the difference beetween:

    import { Redirect } from &#39;react-router-dom&#39;
    
    ...

    &lt;Redirect to=&#39;/login&#39; /&gt; 

and 

    import { push } from &#39;react-router-redux&#39;
    
    ...
    
    push(&#39;/login&#39;)

react-router Redirect vs history.push

I&#39;m learning React myself with online tutorial.

So this is a basic example about using React Router: 


    &lt;Router history={browserHistory}&gt;
      &lt;Route path=&quot;/&quot; component={App}&gt;
        &lt;IndexRoute component={Home}/&gt;
        &lt;Route path=&quot;/home&quot; component={Home}/&gt;
        &lt;Route path=&quot;/about&quot; component={About}/&gt;
        &lt;Route path=&quot;/contact&quot; component={Contact}/&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;

With my App component:

    class App extends React.Component {
       render() {
          return (
             &lt;div&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;Link to=&quot;home&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;Link to=&quot;about&quot;&gt;About&lt;/Link&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;Link to=&quot;contact&quot;&gt;Contact&lt;/Link&gt;&lt;/li&gt;
               &lt;/ul&gt;
              {this.props.children}
            &lt;/div&gt;
         )
       }
    }
    export default App;

However, I have problem when using IndexRoute because it shows nothing, so I search for the module of react-router-dom v4 on npm and there is no IndexRoute inside.
Instead it uses this:


    &lt;Router&gt;
      &lt;div&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;&lt;/li&gt;
        &lt;li&gt;&lt;Link to=&quot;/contact&quot;&gt;Contact&lt;/Link&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;hr/&gt;
      &lt;Route exact path=&quot;/&quot; component={Home}/&gt;
      &lt;Route path=&quot;/about&quot; component={About}/&gt;
      &lt;Route path=&quot;/contact&quot; component={Contact}/&gt;
      &lt;/div&gt;
    &lt;/Router&gt;


So how can I render 2 component for 1 path ?

Using React IndexRoute in react-router v4

First of all, I am pretty familiar with the [withRouter][1] HoC, however, in this case, it doesn&#39;t help because I do not want to access the `history` object in a component.

I am trying to achieve a mechanism that will redirect the user to the login page if I receive back a 401 from a API endpoint. For making http requests I am using [axios][2]. I have around 60 endpoints that I need to cover, that are used in a dozen of components throughout my app.

I want to create a decorator function to the axios instance object, that:

    1. makes the request
    2. if fail &amp;&amp; error_code = 401, update user route to `/login`
    3. if success, return promise

The problem I have with the above is to update the route of the user. Previously, in `react-router-v3`, I could have imported the `browserHistory` object directly from the react-router package, which is no longer possible.

So, my question is, how can I access the history object outside of the React Component without passing it trough the call stack?

  [1]: https://reacttraining.com/react-router/web/api/withRouter
  [2]: https://github.com/mzabriskie/axios

How to Access History Object Outside of a React Component

I am developing an application in which I check if the user is not `loggedIn`. I have to display the login form, else `dispatch` an `action` that would change the route and load other component. Here is my code:

```javascript
render() {
    if (isLoggedIn) {
        // dispatch an action to change the route
    }
    // return login component
    &lt;Login /&gt;
}
```

How can I achieve this as I cannot change states inside the `render` function.

Programmatically Navigate using react-router

(`react-router-dom` version: 4.1.1)

I have working routes set up, but I&#39;m a bit confused about why the `&lt;Switch&gt;` was necessary:

index.js

    import React from &#39;react&#39;;
    import { HashRouter, Route, Switch } from &#39;react-router-dom&#39;;
    
    import App from &#39;./components/App.jsx&#39;;
    import FridgePage from &#39;./components/FridgePage.jsx&#39;;
    
    ReactDOM.render(
        &lt;HashRouter&gt;
            &lt;Switch&gt;
                &lt;Route exact path=&quot;/&quot; component={App} /&gt;
                &lt;Route path=&quot;/fridge&quot; component={FridgePage} /&gt;
            &lt;/Switch&gt;
        &lt;/HashRouter&gt;,
        document.getElementById(&#39;root&#39;)
    )

App.jsx

    import Header from &#39;./Header.jsx&#39;;
    import {Link} from &#39;react-router-dom&#39;;
    
    export default class App extends React.Component {
        render() {
            console.log(this.props);
            return (
                &lt;div&gt;
                    &lt;h1&gt;Herbnew&lt;/h1&gt;
                    &lt;Link to=&quot;fridge&quot;&gt;Fridge&lt;/Link&gt;
                    {this.props.children}
                &lt;/div&gt;
            );
        }
    }

FridgePage.jsx
    
    import React from &#39;react&#39;;
    
    export default class FridgePage extends React.Component {
        render() {
            return (
                &lt;div&gt;
                    &lt;h1&gt;Fridge&lt;/h1&gt;
                    You finally found the fridge!
                &lt;/div&gt;
            );
        }
    }

I used to have a `div` wrapping the routes instead of a `Switch`. In that case, I see the `App` rendered and try to click the Fridge link, but nothing happens (the `FridgePage` isn&#39;t rendered), and no error is output into the console.

As I understand it, the only thing the `Switch` does is exclusively render the first route it matches, and the common problem as a result of omitting it is rendering both pages at once.  If my `&quot;/&quot;` route is exact, then even without the Switch, the Fridge should be the only route that matches, right? Why does it not render at all?
    


React router Switch behavior

I&#39;m using [react-router v4](https://reacttraining.com/react-router/) and [material-ui](http://www.material-ui.com/) in my React app. I was wondering how to change the URL once there is a click on a `GridTile` within [GridList](http://www.material-ui.com/#/components/grid-list).

My initial idea was to use a handler for `onTouchTap`. However, the only way I can see to redirect is by using the components `Redirect` or `Link`. How could I change the URL without rendering those two components?

I&#39;ve tried `this.context.router.push(&#39;/foo&#39;)` but it doesn&#39;t seem to work.

All React Router-V4 Solutions on Gang of Coders

Total of 26 React Router-V4 Solutions