javascript - 在 ReactJS 中更改 URL onClick

Question

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

现在，我正在使用 context react 维持:

1. activetab存储当前选项卡。
2. toggleTab改变的方法activetab使用 setState .

标签组件

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，网址应为 \home\
• 对于选项卡 2，网址应为 \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/');
    }}
>

错误:

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

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

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

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

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

Answer 1

您的 TabComponent 无权访问 React Router history 路由 Prop ，因为它可能未用作 component 给 路线。

你可以使用 withRouter在您的 TabComponent 上访问 route props .

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

export default withRouter(TabComponent);

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

示例

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