react非组件处理路由跳转

react组件中的跳转有Redirect, Link, withRouter高阶组件包裹跳转等等,
但是对于非组件中,如请求接口统一封装调用后的判断跳转, 这时需要创建history对象,调用对应方法跳转, 具体如下:

  • 先下载依赖:
    npm i history --save
  • 使用

import { createHashHistory } from 'history'; // hash路由
// 或者
import { createBrowserHistory } from 'history'; // history路由

const history = createHashHistory();
history.push('/');
React组件中,可以使用路由库(如 react-router-dom)来实现路由跳转。以下是一种常见的方法: 1. 首先,确保你已经安装并配置了路由库,比如 react-router-dom。 2. 在你的路由配置中,使用 `<Route>` 组件指定路径和要渲染的组件。 3. 在类组件中,可以通过 `this.props.history.push()` 方法来进行路由跳转。例如: ```jsx import React from 'react'; class Home extends React.Component { handleButtonClick = () => { // 跳转到另一个路径 this.props.history.push('/detail'); }; render() { return ( <div> <h1>Home Page</h1> <button onClick={this.handleButtonClick}>Go to Detail</button> </div> ); } } export default Home; ``` 在上面的例子中,当点击按钮时,会调用 `handleButtonClick` 方法,并使用 `this.props.history.push('/detail')` 进行路由跳转到 "/detail" 路径。 4. 在路由组件中,可以通过 `<Link>` 组件来实现路由跳转。例如: ```jsx import React from 'react'; import { Link } from 'react-router-dom'; class Home extends React.Component { render() { return ( <div> <h1>Home Page</h1> <Link to="/detail">Go to Detail</Link> </div> ); } } export default Home; ``` 在上面的例子中,使用 `<Link>` 组件将文字 "Go to Detail" 包裹起来,并设置 `to` 属性为目标路径 "/detail",点击文字时会进行路由跳转。 这样,你就可以在 React组件中实现路由跳转了。根据你的实际需求,可以使用 `this.props.history.push()` 或 `<Link>` 组件来进行跳转。记得在路由组件中包裹 `<Router>` 组件,以便在整个应用中进行路由管理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值