在 ReactJS 中更改 URL onClick

Question

在我的项目中，我有一个 TabComponent，它显示 3 个选项卡：主页、流行、所有。

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

1. activetab 存储当前标签页。
2. toggleTab 使用 setState 更改 activetab 的方法。

选项卡组件

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/');
    }}
>

错误：

您不应在<Router> 之外使用<Route> 或withRouter()

---

window.location in onClick:

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

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

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

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

这里的问题是在第一步中已经加载了内容。使用 window.location 会更改 URL，但也会重新加载不需要的页面。有没有办法跳过第 3 步，或者是否有任何其他方法只是更改了 URL？

Answer 1

您的 TabComponent 无法访问 React Router history 路由属性，因为它可能没有用作 component 给 Route。

您可以在TabComponent 上使用withRouter 来访问route props。

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

export default withRouter(TabComponent);

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

示例

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