Reactjs – изменение URL-адреса onClick

Вопрос:

В моем проекте у меня есть 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) по export default withRouter(TabComponent).

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

Ошибка:

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

window.location в onClick:

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

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

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

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

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

Лучший ответ:

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

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

class TabComponent extends Component { render() { // … } } export default withRouter(TabComponent);

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

пример

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