react嵌套路由(新V6.0.2)

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

熊抱抱的一粒

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

阅读量3.9k

点赞数 6

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_52959651/article/details/121267514

版权

本文介绍了React最新版本V6.0.2中的路由嵌套变化，通过一个实例展示了如何设置项目目录、创建router.js、配置App.js以及编写Home.js和News.js。参照了知乎文章并提供了相关链接，帮助读者理解新版本路由的使用方法。

摘要由CSDN通过智能技术生成

最近看了一下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">菜单