ReactRouter-V5

lz796097302

于 2024-03-22 16:56:39 发布

阅读量135

点赞数 1

分类专栏： ReactRouter 文章标签：前端 react

本文链接：https://blog.csdn.net/zmy796097302/article/details/136946108

版权

ReactRouter 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ReactRouter-V5

注意：注册路由两种写法：

第一种：   <Route path="/about" component={About}/> // 可以获取props 中 history 、location、 match 属性值，常用这个
第二种：   <Route path="/about"><About /></Route>   // 只能获取组件传参值，无法获取props中history等值信息

路由组件和一般组件区别：

1、写法不同：

一般组件：<Demo/>

路由组件：<Route path="/demo" component={Demo} /> || <Route exact path="/demo"> <Demo /> </Route>

2、存放位置不同：

一般组件：components

路由组件：pages

3、接收到的 props 不同

一般组件：写组件标签时传递了什么，就能收到什么

路由组件：接收到三个固定的属性
        ```
            history:
                go: f go(n)
                goBack: f goBack()
                goForward: f goForward()
                push: f push(path,state)
                replace:f replace(path,state)
            location:
                pathname:"/about"
                search:""
                state: undefined
            match:
                params:{}
                path:"/about"
                url:"/about"
        ```

4、NavLink 与封装 NavLink

    1. NavLink 可以实现路由链接得高亮，通过activeClassName 指定样式名
    2. 标签体内容是一个特殊得标签属性
    3. 通过 this.props.children （类组件中使用）或者 props.children （函数组件使用）可以获取标签体内容

5、Switch 得使用

    1. 通常情况下，path和component是一一对应的关系
    2. Switch 可以提高路由匹配效率（单一匹配）

6、解决多级路径刷新页面样式丢失问题

    比如：path="/about"(一级路径没问题)，path="/home/about"(多级路径样式丢失)

    1.修改public/index.html 中 引入样式时不写 ./, 写 / （常用）
    2.修改public/index.html 中 引入样式时不写 ./, 写 %PUBLIC_URL% （常用）
    3.直接使用HashRouter，#号后的地址，不在请求服务器中，属于前端代码

7、路由的严格匹配与模糊匹配

    1.默认使用的是模糊匹配（简单记：【to:输入的路径】必须包含要【path:匹配的路径】,且顺序要一致）举例：to="/home/news" 模糊匹配 path="home"
    2.开启严格匹配：<Route exact path="about" component={About}>  </Route>
    3.严格匹配不要随便开始，需要再开，有些时候开会导致无法继续匹配二级路由

8、Redirect 的使用

    1.一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到 Redireact指定的路由
    2.具体编码：访问以下路由没有的路径如：/list => 跳转到 /about
    ```
        <Switch>
            <Route path="/home" component={Home} />
            {/* <Route exact path="/home">
                <Home />
            </Route> */}
            <Route path="/about">
                <About />
            </Route>
            <Route path="/dashboard">
                <DashBoard />
            </Route>
            <Redirect to="/about"></Redirect>
        </Switch>
    ```

9、嵌套路由

    1.注册子路由时候要写上父路由的path值，如：父路由：/home ，子路由: /home/news
    2.路由的匹配是按照注册路由的顺序进行的，从上到下

10、向路由数组传递参数

    1.params参数
        路由链接（携带参数）：<Link to='/home/message/detail/01/message1'> 详情 </Link>
        注册路由（声明接收）：<Route path="/home/message/detail/:id/:title" component={Detail} />
        接收参数：props.match.params（函数组件接收参数，类组件接收参数，前加 this.props.match.params）

        如下是打印 `props.match` 属性的值:
        ```
            match:
                isExact: true
                params:
                    id: "01"
                    title: "message1"
                path: "/home/message/detail/:id/:title"
                url: "/home/message/detail/01/message1"
                ...
        ```
    2.search 参数
        路由链接（携带参数）：`<Link to='/home/message/detail?id=01&title=message1'> 详情 </Link>`
        注册路由（无需声明，正常注册即可）：`<Route path="/home/message/detail" component={Detail} />`
        接收参数：`props.location.search`（函数组件接收参数，类组件接收参数，前加 `this.props.location.search`）
        备注：获取到的 search 是 urlencoded 编码字符串，需要借助 qs 解析
        	```
            import qs from 'qs'  ,
            const {search} = props.location
            const { id } = qs.parse(search.slice(1))
        ```
        如下是打印 `props.location` 属性的值:
        ```
            location:
                pathname: "/home/message/detail"
                search: "?id=02&tile=message 2"
                ...
        ```
    3. state 参数
        路由链接（携带参数）：`<Link to={{pathname:'/home/message/detail',search: '?sort=name',state:{id:item.id,title:item.title}  }}> 详情 </Link>`
        注册路由（无需声明，正常注册即可）：`<Route path="/home/message/detail" component={Detail} />`
        接收参数：`props.location.state`（函数组件接收参数，类组件接收参数，前加 `this.props.location.state`）
        备注：刷新也可以保留住参数

        如下是打印 `props.location` 属性的值:
        location:
            pathname: "/home/message/detail"
            search: ""
            state: {id: '02', title: 'message 2'}
            ...

11、编程式路由导航

     借助 props.history 对象上的API对操作路由跳转、前进、后退, 使用上述 10 中的三种路由访问方法
        - props.history.push()
        - props.history.replace()
        - props.history.goBack()
        - props.history.goForward()
        - props.history.go()

12、withRouter 可以加工一般组件，让一般组件具备路由组件所特有的API，它的返回值式一个新组件

13、BrowserRouter 与 HashRouter 的区别

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