react嵌套路由(新V6.0.2)

最新推荐文章于 2024-07-30 10:55:19 发布

m0_67265311

最新推荐文章于 2024-07-30 10:55:19 发布

阅读量207

点赞数 1

分类专栏：前端 html 文章标签：安全 firefox 前端

本文链接：https://blog.youkuaiyun.com/m0_67265311/article/details/123300788

版权

前端同时被 2 个专栏收录

38 篇文章

订阅专栏

html

38 篇文章

订阅专栏

本文介绍了React最新版本V6.0.2中的路由嵌套变化，通过项目目录结构、router.js、App.js、Home.js和News.js的代码示例，展示了如何实现路由配置。参考了知乎文章，提供了详细的操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近看了一下react路由，发现网上的视频都是老版的，新版本的路由变化还是蛮大的，我就将我这次遇到的路由嵌套举个例子。
新的特性
<Switch>重命名为<Routes>

component/render被element替代

新API:Outlet

1:项目目录
在这里插入图片描述
2：创建router.js
代码

import React, { Component } from "react";
//引入路由
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
//引入组件
import Home from "./pages/Home";
import CityList from "./pages/CityList";
import News from "./pages/News";

class Routers extends Component {
    render() {
        return (
            <Router>
                <>
                    <Link to="/home">首页</Link>
                    <Link to="/citylist">菜单</Link>
                    <Link to="/home/news">嵌套</Link>
//新版本路由写法
                    <Routes>
                        <Route path="/home" element={<Home />}>
                        <Route path="news" element={<News />}></Route>

                        </Route>
                        <Route path="/citylist" element={<CityList />}></Route>

                    </Routes>  
                </>
            </Router>
        )
    }
}
export default Routers

3：App.js

import React from "react";
//引入配置好的路由组件
import Routers from './router'

function App() {
  return (
    <div className="App">
   <Routers/>
    </div>
  );
}

export default App;

4：Home.js

import React, { Component } from 'react'
// 导入路由
import {  Outlet } from 'react-router-dom'
// import News from "../News";
export default class Home extends Component {
    render() {
        return (
            // <Router>
            <div>
            //老版本的路由写法不能实现效果
                {/* <Link to="/home/news">提交</Link>*/}
                {/* <Routes> 
                    <Route path="/home/news" element={<News />}></Route>
                </Routes> */}
                // // 留给子组件News的出口
                <Outlet />
            </div>
            // </Router>
        )
    }
}

5:News.js

import React, { Component } from 'react'

export default class News extends Component {
    render() {
        return (
            <div>
               News
            </div>
        )
    }
}

参考了一位知乎大佬的文章，附上链接react路由