gpt4 book ai didi

javascript - 在 ReactJS 中更改 URL onClick

转载 作者:行者123 更新时间:2023-11-30 20:23:24 25 4
gpt4 key购买 nike

在我的项目中我有一个 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.historyonClick方法不适用于 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.locationonClick :

<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 的方法?

最佳答案

您的 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>
);
}
}

关于javascript - 在 ReactJS 中更改 URL onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51205809/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com