Changing URL onClick in ReactJS

Question

In my project I have a TabComponent which displays 3 tabs: home, popular, all.

Now, I am using context of react to maintain:

1. activetab which stores current tab.
2. toggleTab method which changes activetab using setState.

TabComponent

import React, {Component} from 'react'
import Context from '../../provider'
import {Nav, NavItem, NavLink} from 'reactstrap'
import {Redirect} from 'react-router-dom'
import classnames from 'classnames'

export default class TabComponent extends Component {
    render() {
        return (
            <Context.Consumer>
                {context => (
                    <Nav tabs color='primary'>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: context.activeTab === '1' })}
                                onClick={() =>{context.toggleTab('1')}}
                            >
                            Home
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: context.activeTab === '2' })}
                                onClick={() => {context.toggleTab('2')}}
                            >
                            Popular
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                className={classnames({ active: context.activeTab === '3' })}
                                onClick={() => {context.toggleTab('3')}}
                            >
                            All
                            </NavLink>
                        </NavItem>                
                    </Nav>
                )}
            </Context.Consumer>
        )
    }
}

What I want to achieve is, onClick should also change the URL.

• For tab 1, the url should be \home\
• For tab 2, the url should be \popular\
• For tab 3, the url should be \all\

---

Using this.props.history in the onClick method is not working with export default withRouter(TabComponent).

<NavLink
    className={classnames({ active: context.activeTab === '1' })}
    onClick={() =>{
        context.toggleTab('1');
        this.props.history('/home/');
    }}
>

Error:

You should not use <Route> or withRouter() outside a <Router>

---

window.location in onClick:

<NavLink
    className={classnames({ active: context.activeTab === '1' })}
    onClick={() =>{
        context.toggleTab('1');
        window.location = '/home/';
    }}
>

This actually works but the behaviour is not good.

Clicking the tab does the following:

1. It Changes the content of body using context.toggleTab.
2. Then it changes the URL using window.location.
3. Since, the URL changed, the page is getting reloaded.

The problem here is the content is already loaded in the 1st step. Using window.location changes the URL but also re-loads the page which is not required. It there a way to do skip the 3rd step or is that any other method which just changes the URL?

Answer 1

Your TabComponent does not have access to the React Router history route prop because it's probably not used as a component given to a Route.

You could use withRouter on your TabComponent to get access to the route props.

class TabComponent extends Component {
    render() {
      // ...
    }
}

export default withRouter(TabComponent);

You also must make sure that you have a Router component at the top of your app.

Example

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        {/* ... */}
      </BrowserRouter>
    );
  }
}