Javascript Reactjs-更改URL onClick

在我的项目中，我有一个

选项卡component

，它显示3个选项卡：home、popular和all

现在，我使用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>
        )
    }
}

错误：

您不应在

外部使用

或
with router（）


window.location
在
onClick
中：

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

{
context.toggleTab（'1'）；
window.location='/home/'；
}}
>

这确实有效，但行为不好

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

它使用
context.toggleTab
更改正文的内容
然后使用
window.location
更改URL
由于URL已更改，页面将重新加载
这里的问题是内容已在第一步加载。使用
window.location
更改URL，但也重新加载不需要的页面。有没有办法跳过第三步，或者是任何其他方法只是更改URL？
您的
选项卡组件
无法访问React Router
history
路由属性，因为它可能没有用作
路由
的
组件

您可以在
选项卡组件上使用来访问

你还必须确保你的应用程序顶部有一个组件

示例

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

类应用程序扩展组件{
render（）{
返回(
{/* ... */}
);
}
}
如果您使用的是react路由器，则可以使用此.props.history（url）。否则您可以使用window.location=url。我不确定在哪里写
这个.props.history（url）
！！您可以将其写入onClick函数或切换函数。这两种方法都可以，我猜我会出错。如果我这样做，我已经更新了我的问题。这是因为TabComponent不是由呈现的。因此，您可以使用window.location=url而不是this.props.history实现了这一点，我不太明白为什么我们需要在顶层使用
BrowserRouter
？@SreekarMouli
withRouter
使用
Router
组件提供的上下文中的值，因此，如果使用
with Router
HOC的组件在路由器外部呈现，它将无法获得所需的正确信息。
class TabComponent extends Component {
    render() {
      // ...
    }
}

export default withRouter(TabComponent);

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