使用withRouter

最新推荐文章于 2022-08-31 10:03:40 发布
最新推荐文章于 2022-08-31 10:03:40 发布
阅读量406 收藏 1
点赞数
分类专栏： React17/18 文章标签： react withRouter 一般组件 路由组件 props
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/124946786
版权
本文详细介绍了如何在React应用中使用BrowserRouter实现嵌套路由，涉及组件如Header、About、Home和News/Message的配置，以及如何在一般组件Header中利用withRouter获取和处理路由信息。
摘要由CSDN通过智能技术生成

文章目录

嵌套路由的实现

在这里插入图片描述
嵌套路由的路由结构如下：

  • /about，About组件
  • /home，Home组件
    • /home/news，News组件
    • /home/message，Message组件

代码涉及的主要文件有：

  1. 模板文件index.html
  2. 入口文件index.js
  3. 入口组件App.js
  4. 一般组件Header：components/Header/index.jsx
  5. 路由组件About：pages/About/index.jsx
  6. 路由组件Home：pages/Home/index.jsx
  7. 路由组件News：pages/Home/News/index.jsx
  8. 路由组件Message：pages/Home/Message/index.jsx

模板文件index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

App.js（App组件）

import React, { Component } from 'react'
import {NavLink,Switch,Route,Redirect} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Header from "./components/Header";

export default class App extends Component {
  render() {
  	console.log("props in Header",this.props);
    return (
      <div>
        <Header/>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Switch>
                  <Route path="/about" component={About}></Route>
                  <Route path="/home" component={Home}></Route>
                  <Redirect to="/home"/>
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Header/index.jsx（Header组件）

import React, { Component } from 'react'

export default class Header extends Component {
    render() {
        return (
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>Vue Router Demo</h2></div>
                </div>
            </div>
        )
    }
}

About/index.jsx（About组件）

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
        <h2>我是About的内容</h2>
    )
  }
}

Home/index.jsx（Home组件）

import React, { Component } from 'react'
import { NavLink,Switch,Route,Redirect } from 'react-router-dom'
import News from "./News";
import Message from "./Message"

export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <NavLink to="/home/news" className="list-group-item" activeClassName="active">News</NavLink>
            </li>
            <li>
              <NavLink to="/home/message" className="list-group-item" activeClassName="active">Message</NavLink>
            </li>
          </ul>
          <Switch>
            <Route path="/home/news" component={News}></Route>
            <Route path="/home/message" component={Message}></Route>
            <Redirect to="/home/news"/>
          </Switch>
        </div>
      </div>
    )
  }
}

News/index.jsx（News组件）

import React, { Component } from 'react'

export default class News extends Component {
    render() {
        return (
            <ul>
                <li>news001</li>
                <li>news002</li>
                <li>news003</li>
            </ul>
        )
    }
}

Message/index.jsx（Message组件）

import React, { Component } from 'react'

export default class index extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>
                        <a href="/message1">message001</a>&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="/message2">message002</a>&nbsp;&nbsp;
                    </li>
                    <li>
                        <a href="/message/3">message003</a>&nbsp;&nbsp;
                    </li>
                </ul>
            </div>
        )
    }
}

路由组件的props

先打印下路由组件接收到的props：在Detail的render()中添加console.log(this.props)，如下：
在这里插入图片描述
我们将重点关注以下内容：

  • history
    • go: ƒ go(n)
    • goBack: ƒ goBack()
    • goForward: ƒ goForward()
    • push: ƒ push(path, state)
    • replace: ƒ replace(path, state)
  • location
    • pathname: “/home/message/detail”
    • search: “”
    • state: {id: ‘001’, title: ‘message01’}
  • match:
    • params: {}
    • path: “/home/message/detail”
    • url: “/home/message/detail”

使用withRouter

一般组件Header的props

在一般组件Header的render函数中添加console.log(this.props)，以在控制台打印出其接收到的props。
结果如下：
在这里插入图片描述

withRouter(Header)的props

代码变更涉及components/Header/index.jsx，如下，
从react-router-dom中引入了withRouter，并使用withRouter将Header加工后导出。
withRouter的作用是，让一般组件具有了路由组件特有的API，如下，
在这里插入图片描述

import React, { Component } from 'react';
import {withRouter} from "react-router-dom";

class Header extends Component {
    render() {
        console.log("props in Header",this.props);
        return (
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>Vue Router Demo</h2></div>
                </div>
            </div>
        )
    }
}

export default withRouter(Header);
richest_qi
关注
专栏目录
【React】React-router使用及源码 (类组件)
Alberqing_的博客
09-19 460
本篇文章来自：方一鸣要实现哪些内容？BrowserRouterRouteLinkSwitchwithRouteruseHistoryuseLocationuseParamsuseRout...
【React路由】编程式路由导航和withRouter的使用——push replace
m0_67391401的博客
07-28 158
借助this.props.history对象上的API对操作路由跳转、前进、后退。
【React路由】编程式路由导航和withRouter的使用——push / replace
xuxuii的博客
07-16 3745
借助this.props.history对象上的API对操作路由跳转、前进、后退。
withRouter使用
weixin_30416497的博客
08-14 435
import React from 'react'; import {Switch,NavLink,Route,Redirect,withRouter} from 'react-router-dom'; import Detail from './Detail'; import Login from './Login' import User from './User'; impor...
withRouter方法的使用
yidianyuanzhidong的博客
06-27 279
首先withRouter是“react-router-dom”的一个方法。 其作用就是传入一个一般组件，返回一个路由组件所有属性（history.location,match）的组件 import {withRouter} from "react-router-dom" import Header from "./Header" export default withRouter(Header) 一般组件Header此时props属性获得了路由组件才有的history、location、match属性
将一般组件拥有路由组件身上的api（使用withRouter）
weixin_48952990的博客
08-31 146
将一般组件拥有路由组件身上的api（使用withRouter）
使用react 高阶组件withRouter
Tanjc518的博客
12-29 522
使用react 高阶组件withRouter withRouter 是一个高阶组件，把 match，location，history 三个对象注入到组件的 props 中。这是一个非常实用的函数 react中经过路由渲染的组件才拥有路由参数，使用this.props.history.push(’/a’)跳转到对应路由的页面 一般都是使用withRouter函数调用 import React, { Component } from 'react' import { withRouter } from 'rea
withrouter
最新发布
08-30
通过使用WithRouter，我们可以在不是路由组件的地方访问到路由信息，比如在函数组件中。 WithRouter的使用方式是通过导入`withRouter`函数，并将需要传递路由信息的组件作为参数传递给`withRouter`函数，然后将返回...
初学react - 使用@withRouter 报错的解决
sunshime的博客
03-23 1331
报错： Support for the experimental syntax 'decorators-legacy' isn't currently enabled 解决方案： 先运行 npm run eject 将默认隐藏的项目暴露出来，然后在 package.json 文件的 babel 对象里加入以下代码： "plugins": [ [ "@babel/plu...
withrouter在v6怎么使用
06-03
在 React Router v6 中，`withRouter` 已经不再被支持了。取而代之的是使用 `useNavigate` 钩子来进行路由跳转。 具体来说，要将 React 组件转换为路由组件，需要完成以下步骤： 1. 在需要转换为路由组件的组件...
class类使用withrouter
weixin_48651630的博客
09-25 263
import {withRouter} from “react-router-dom” @withRouter
react 路由导航栏 withRouter
weixin_34315189的博客
10-07 313
codesandbox https://codesandbox.io/s/9l6prnyxjy app.js import React, { Component, Fragment } from "react"; import { AppBar, Button, Tabs, Tab, Icon, Typography, Fade, Slide } from "@ma...
withRouter组件(推荐阅读)
hsany330的专栏
05-06 2593
作用： 默认情况下必须经过路由匹配渲染的组件才存在this.props,才拥有路由参数，执行this.props.history.push('/detail')跳转到对应路由的页面，然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对...
组件Todos获取路由信息的两种方式（三）02-——父组件传递路由参数给容器组件 & 使用 withRouter 高阶组件包装容器组件（通用）
weixin_44867717的博客
06-20 98
组件Todos获取路由信息的两种方式——父组件传递路由参数给容器组件 & 使用 withRouter 高阶组件包装容器组件（通用） 方式一：通过父组件 App 来传递路由参数给TodoList容器组件 // App 组件： let type = props.match.params.filter <List type={type}/> 方式二：使用 withRouter 高阶组件包装 TodoList容器组件（通用） import { withRouter } from '
React学习--BrowserRouter与HashRouter的区别，withRouter用法
weixin_42738354的博客
05-09 360
一.编程式路由导航 借助this.props.history对象上的API操作路由跳转、前进、后退 this.props.history.push() this.props.history.replace() this.props.history.goBack() this.props.history.goForward() this.props.history.go() 二.withRouter的使用 import {withRouter} from 'react-router-dom' class
React-router
探鱼不是鱼
10-30 869
React-router 前言: 现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体 验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由 应运而生 前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用React路由简单来说，就是配置 路径和组件（配对） 相关api 组件 <BrowserR
理解withRouter
下雨不愁的博客
01-11 7843
withRouter的适用场景 1.避免更新受阻 因为react-redux的connect高阶组件会为传入的参数组件实现shouldComponentUpdate 这个钩子函数， 导致只有prop发生变化时才触发更新相关的生命周期函数(含render)而很显然，我们的location对象并没有作为prop传入该参数组件 // before export default connect(mapS...
react router中的withRouter
笔记搬运工
01-15 5461
withRouter You can get access to the history object’s properties and the closest 's match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to...
react-router withRouter
热门推荐
ISaiSai的专栏
09-26 2万+
react-router 提供了一个withRouter组件 withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。 无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息import {withRouter} from 're
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值