Question

在我的项目中，我有一个TabComponent，其中显示3个标签：“首页”，“热门”，“全部”。

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

activetab，其中存储当前标签。
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，网址应为\home\
对于标签2，网址应为\popular\
对于标签3，网址应为\all\

在this.props.history方法中使用onClick不能与export default withRouter(TabComponent)一起使用。

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

错误：

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

window.location in onClick：

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

这实际上有效，但是行为不好。

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

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

这里的问题是内容已在第一步中加载。使用window.location可以更改URL，还可以重新加载不需要的页面。可以跳过第三步吗，还是只是更改URL的其他方法？

Answer 1

您的TabComponent无法访问React Router history路由道具，因为它可能不被用作给component的{{1}}。

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

TabComponent

还必须确保在应用程序顶部具有Router组件。

示例

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

export default withRouter(TabComponent);

Reactjs-更改URL onClick

1 个答案: