Reactjs - 更改URL onClick [英] Reactjs - Changing URL onClick

问题描述

在我的项目中，我有一个 TabComponent ，它显示3个标签：home，popular，all。

In my project I have a TabComponent which displays 3 tabs: home, popular, all.

现在，我正在使用 context 维持反应：

Now, I am using context of react to maintain:

1. activetab 存储当前选项卡。


2. toggleTab 更改 activetab <的方法/ code>使用 setState 。



1. activetab which stores current tab.
2. toggleTab method which changes activetab using 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 也应该更改网址。

What I want to achieve is, onClick should also change the URL.

• 对于标签1，网址应该是是 \ home \


• 对于标签2，网址应为 \popular\


• 对于标签3，网址应为 \ all \

• For tab 1, the url should be \home\
• For tab 2, the url should be \popular\
• For tab 3, the url should be \all\

在<$中使用 this.props.history c $ c> onClick 方法无法使用 export default withRouter（TabComponent）。

Using this.props.history in the onClick method is not working with export default withRouter(TabComponent).

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

错误：

你不应该使用< Route> 或 withRouter（） <路由器>

---

window.location in onClick ：

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

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

This actually works but the behaviour is not good.

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

Clicking the tab does the following:

1. 它使用 context.toggleTab <更改正文的内容/ code>。


2. 然后使用 window.location 更改网址。


3. 由于URL已更改，页面将重新加载。

1. It Changes the content of body using context.toggleTab.
2. Then it changes the URL using window.location.
3. Since, the URL changed, the page is getting reloaded.

此处的问题是内容已加载第一步。使用 window.location 更改URL，但重新加载不需要的页面。有没有办法跳过第3步或是只是更改URL的任何其他方法？

The problem here is the content is already loaded in the 1st step. Using window.location changes the URL but also re-loads the page which is not required. It there a way to do skip the 3rd step or is that any other method which just changes the URL?

推荐答案

您的 TabComponent 无法访问React Router 历史记录路径道具，因为它可能不会用作组件提供给路线。

Your TabComponent does not have access to the React Router history route prop because it's probably not used as a component given to a Route.

您可以使用 withRouter TabComponent 访问路径道具。

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

export default withRouter(TabComponent);

您还必须确保拥有 路由器 组件位于应用顶部。

You also must make sure that you have a Router component at the top of your app.

示例

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

这篇关于Reactjs - 更改URL onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！