在 ReactJS 中更改 URL onClick

Question

在我的项目中，我有一个 TabComponent 显示 3 个选项卡：主页、热门、全部。

现在，我正在使用context的react来维护：

activetab 存储当前选项卡。
toggleTab 使用 setState.

activetab

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\

在 onClick 方法中使用 this.props.history 不适用于 export default withRouter(TabComponent)。

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

错误:

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

window.location 在 onClick:

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

这确实有效，但行为不好。

单击选项卡会执行以下操作：

它使用context.toggleTab更改正文的内容。
然后它使用 window.location 更改 URL。
由于 URL 已更改，页面正在重新加载。

这里的问题是内容已经在第一步中加载了。使用 window.location 会更改 URL，但也会 重新加载 不需要的页面。有一种方法可以跳过第 3 步，或者 just 改变 URL?

的任何其他方法

Answer 1

您的 TabComponent 无法访问 React Router history 路由道具，因为它可能未用作 component 给 Route.

你可以使用 withRouter on your TabComponent to get access to the route props.

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

export default withRouter(TabComponent);

您还必须确保您的应用顶部有一个 Router 组件。

例子

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

在 ReactJS 中更改 URL onClick

Changing URL onClick in ReactJS

javascript

reactjs

window.location