Reactjs - Изменение URL на клике

Question

В моем проекте у меня есть TabComponent, который отображает 3 вкладки: главная, популярная, все.

Теперь я использую context реагирования для поддержания:

1. activetab, в котором хранится текущая вкладка.
2. toggleTab метод, который изменяет activetab с использованием 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>
        )
    }
}

Я хочу, чтобы onClick также изменил URL.

• Для вкладки 1 URL должен быть \home\
• Для вкладки 2 URL должен быть \popular\
• Для вкладки 3, URL должен быть \all\

---

Использование this.props.history в методе onClick не работает с export default withRouter(TabComponent).

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

Error

Вы не должны использовать <Route> или withRouter() вне <Router>

---

window.location in onClick:

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

Это на самом деле работает, но поведение не очень хорошее.

При нажатии на вкладку происходит следующее:

1. Изменяет содержимое тела, используя context.toggleTab.
2. Затем он изменяет URL, используя window.location.
3. Поскольку URL изменился, страница перезагружается.

Проблема в том, что содержимое уже загружено на первом шаге . Использование window.location изменяет URL, но также перезагружает страницу, которая не требуется. Есть ли способ пропустить третий шаг или это любой другой метод, который просто меняет URL?

Answer 1

Ваш TabComponent не имеет доступа к опоре маршрута history React Router, поскольку он, вероятно, не используется как component, присвоенный Route.

Вы можете использовать withRouter на вашем TabComponent, чтобы получить доступ к маршрутным реквизитам .

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

export default withRouter(TabComponent);

Вы также должны убедиться, что в верхней части приложения установлен компонент Router.

* * Пример тысячи двадцать-одина * +1022 *

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