React-router(2)路由嵌套

2、路由嵌套:

参考 2.routingNested.js

DEMO地址

还是以上一节上面那个 DEMO 为示例。

毫无疑问,我们肯定会面临路由嵌套的问题,即在顶级路由匹配到组件后,子组件里面也可能有一个次级路由。

假如顶级路由的url为:/1,那么次级路由匹配后的路径一般来说是 /1/2

但是假如当前路径是 /1,然后次级路由里有这样一个标签 <Link to="/2"}>示例2</Link>

当我们点击这个标签时,跳转的 url 是 /2,而不是我们期望的 /1/2。因此我们需要拿到之前的 url /1,具体方法就是通过路由的 match 属性来拿,于是就有了这种写法:

<li><Link to={`${this.props.match.url}/2`}>示例2</Link></li>

意思就是跳转到当前路径,后面再拼接 /2这个路径。

相对应的,我们在 Route 标签里也要添加相同的内容:

<Route path={`${this.props.match.url}/2`} component={second}/>

示例(子路由是 ChildRouter):

import React from "react";
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

const First = () => <div>第一个示例的第【1】个路由,第一个路由在第一个和第二个url里都会显示,但不在第三个显示</div>
const Second = () => <div>第一个示例的第【2】个路由,只在第二个url里显示</div>
const ChildRouter = (route) => <div>第一个示例的第【3】个路由,只在第三个url里显示
    <Router>
        <div>
            <h3>以下是子路由的属性</h3>
            <p>{JSON.stringify(route)}</p>
            <li><Link to={`${route.match.url}/1`}>跳转子1</Link></li>
            <li><Link to={`${route.match.url}/2`}>跳转子2</Link></li>
            <hr/>
            {/* component 是一个React组件。
              * 注意,组件是放在这个属性里,而不是 Route 包裹的里面
              * */}
            <Route path={`${route.match.url}/1`} component={() => <h3>这里是子1</h3>}/>
            <Route path={`${route.match.url}/2`} component={() => <h3>这里是子2</h3>}/>
        </div>
    </Router>
</div>

class RoutingNested extends React.Component {
    render() {
        return <div>
            <h3>React-router 路由嵌套</h3>
            <h3>路由数据被存储在 this.props.match 里,这是其中的值{JSON.stringify(this.props.match)}</h3>
            <Router>
                <div>
                    {/* this.props.match.url 表示当前url */}
                    <li><Link to={`${this.props.match.url}/1`}>示例1</Link></li>
                    <li><Link to={`${this.props.match.url}/2`}>示例2</Link></li>
                    <li><Link to={`${this.props.match.url}/3`}>示例3</Link></li>
                    <hr/>

                    <Route path={`${this.props.match.url}/1`} component={First}/>
                    <Route path={`${this.props.match.url}/2`} component={Second}/>
                    <Route path={`${this.props.match.url}/3`} component={ChildRouter}/>
                </div>
            </Router>
        </div>
    }
}
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 ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值