react-router-dom v6版本嵌套路由

最新推荐文章于 2023-09-20 15:35:22 发布

jzh1359314792

最新推荐文章于 2023-09-20 15:35:22 发布

阅读量1.1k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/jzh1359314792/article/details/126526047

版权

App组件

import React, {Component} from "react";
import './App.css';
import {Route, Routes, Navigate} from 'react-router-dom'
import About from "./pages/About";
import Home from "./pages/Home";
import MyNavLink from "./components/MyNavLink";

class App extends Component {
    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group"
                            <MyNavLink to="/about">About</MyNavLink>
                            <MyNavLink to="/home">Home</MyNavLink>

                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/*注册路由  用Routes替换了v5版本的Switch*/}
                                <Routes>
                                {/*用element替换v5版本的component，Navigate 替换Redirect */}
                                    <Route path="/about" element={<About/>}/>
                                    <Route path="/home/*" element={<Home/>}/>
                                    <Route path="*" element={<Navigate to="/home"/>}/>
                                </Routes>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

Home组件，里面嵌套了News和Message组件，与v5版本还是有较大区别

import React, {Component} from 'react';
import {Navigate, Route, Routes} from 'react-router-dom'
import MyNavLink from "../../components/MyNavLink";
import News from "./News";
import Message from "./Message";

class Home extends Component {
    render() {
        return (
            <div>
                <h3>Home</h3>
                <div>
                    <ul className="nav nav-tabs">
                        <li>
                            <MyNavLink to="news">News</MyNavLink>
                        </li>
                        <li>
                            <MyNavLink to="message">Message</MyNavLink>
                        </li>
                    </ul>
                    {/* 注册路由 */}
                    <Routes>
                        <Route path="news" element={<News/>} />
                        <Route path="message" element={<Message/>} />
                        <Route path="*" element={<Navigate to="news"/>}/>
                    </Routes>
                </div>
            </div>
        );
    }
}

export default Home;