React第三次总结(路由、嵌套路由、withRouter、编程式路由)

路由的基本使用
  1. 明确好界面的导航区、展示区
  2. 导航区的a 标签改为Link标签
    <Link className="list-group-item" to="/about">About</Link>
  3. 展示区写Route标签进行路径的匹配
    <Route path= '/xxxx' component={Demo}/>
  4. 的最外侧包裹了一个<BrowserRouter><HashRouter>
路由组件与一般组件
  1. 写法不同:
    一般组件: <Demo/>
    路由组件: <Route path=" /demo" component={Demo}/>
  2. 存放位置不同:.
    一般组件: components
    路由组件: pages
  3. 接收到的props不同:
    一般组件:写组件标签时传递了什么,就能收到什么
    路由组件:接收到三个固定的属性
    history:
        action: "PUSH"
        block: ƒ block(prompt)
        createHref: ƒ createHref(location)
        go: ƒ go(n)
        goBack: ƒ goBack()
        goForward: ƒ goForward()
        length: 50
        listen: ƒ listen(listener)
        location: {pathname: "/about", search: "", hash: "", state: undefined, key: "biwqw6"}
        push: ƒ push(path, state)
        replace: ƒ replace(path, state)
    location:
        hash: ""
        key: "biwqw6"
        pathname: "/about"
        search: ""
        state: undefined
    match:
         isExact: true
         params: {}
         path: "/about"
         url: "/about"
    
NavLink与封装NavLink
1. NavLink可以实现路由连接的高亮,通过activeClassName指定样式名。
2. 标签体内容是一个特殊的标签属性
3. 通过this.props.children 可以获取标签体内容
Switch的使用
  1. 通常情况下,path和component是一一对应的关系。
  2. Switch 可以提高路由匹配效率(单一匹配)
路由的严格匹配与模糊匹配
  1. 默认使用的是模糊匹配(简单记: [ 输入的路径]必须包含要[匹配的路径],且顺序要-致)
  2. 开启严格匹配:<Route exact={true} path="/ about" component={About}/>
  3. 严格匹配不要随便开启,需要再开,有些时候开启会导致无法继续匹配二级路由。(注意)
向路由组件传递参数
  1. params 参数
    1. params参数
      路由链接(携带参数): <Link to= '/demo/test/tom/18'}>详情</Link>
      注册路由(声明接收): <Route path=" /demo/test/:name/:age" component={Test}/>
      接收参数: const {name,age} = this . props . match. params
    2. search参数
      路由链接(携带参数):<Link to=' /demo/test ?name=tom&age=18'}>详情</Link>
      注册路由(无需声明,正常注册即可):<Route path=" /demo/test" component={Test}/>
      接收参数: const {search} = this. props . location
      备注:获取到的search是urlencoded编码字 符串,需要借助querystring解析
    3. state参数
      路由链接(携带参数):<Link to={{path: '/demo/test' , state: {name: 'tom' , age :18}}}>详情</Link>
      注册路由(无需声明,正常注册即可):<Route path=" /demo/test" component={Test}/>
      接收参数: this . props . location. state
      备注:刷新也可以保留住参数。
router的push与replace模式
 - 默认为push模式, 会存在history的历史记录
 - replace 模式不会产生历史记录 
    <Link replace to={`/home/message/detail/${mapObj.id}/${mapObj.title}`}>{ mapObj.title }</Link>&nbsp;&nbsp;
编程式路由
 this.props.history.push(`/home/message/detail/${id}/${title}`)

 this.props.history.replace(`/home/message/detail/${id}/${title}`)

借助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的用法

withRouter 可以加工一般组件,将一般组件变成路由组件的问题

import React, { Component } from 'react'

import { withRouter } from 'react-router-dom'
 class Header extends Component {
    render() {
        return (
            <div className="page-header">
                <h2>React Router Demo</h2>
                </div>
        )
    }
}

export default withRouter(Header)
BrowserRouter与HashRouter的区别
  1. 底层原理不一样:
    BrowserRouter使用的是H5的history API, 不兼容IE9及以下版本。
    HashRouter使用的是URL的哈希值。
  2. ur1表现形式不一-样
    BrowserRouter的路径中没有#,例如: localhost:3000/demo/test
    HashRouter的路径包含#,例如: localhost:3000/#/demo/test
  3. 刷新后对路由state参数的影响
    (1) BrowserRouter没有任何影响,因为state保 存在history对象中。
    (2) HashRouter刷新后会导致路由state参数的丢失。!!!
  4. 备注: HashRouter 可以用于解决一些路径错误相关的问题。
项目地址

gitee地址: https://gitee.com/weiyao11/react-router

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
React Router v6中,路由套的写法有所改变。以下是一个示例: ```jsx import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import { Outlet } from 'react-router-dom'; const App = () => { return ( <Router> <Routes> <Route path="/app" element={<ThisLayout />}> <Route path="/" element={<PostsList />} /> <Route path="/singlePostPage/:id" element={<SinglePostPage />} /> </Route> </Routes> </Router> ); }; const PostsList = () => { // ... return ( <section> <h2>posts</h2> {renderedPosts} <Outlet /> {/* 子路由渲染位置 */} </section> ); }; const SinglePostPage = () => { // ... }; const ThisLayout = () => { // ... }; export default App; ``` 在v6中,我们使用`Routes`组件来定义路由,而不再使用`Switch`组件。在父路由中,我们使用`Route`组件来定义子路由。子路由的元素可以通过`element`属性指定。在子路由的父组件中,我们可以使用`Outlet`组件来渲染子路由的内容。 希望这个例子能帮助你理解React Router v6中的路由套写法。 #### 引用[.reference_title] - *1* [解决react-router-dom V6路由套时子路由无法显示的问题](https://blog.csdn.net/frank7023/article/details/128913988)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [React Router v6 路由配置,套路由](https://blog.csdn.net/Snow_GX/article/details/123656412)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [react-router-dom v6版本 套路由](https://blog.csdn.net/jzh1359314792/article/details/126526047)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值