路由导航的使用

淮玖

已于 2024-06-22 21:32:54 修改

阅读量347

点赞数 7

文章标签：前端 react.js

于 2024-06-22 20:13:45 首次发布

本文链接：https://blog.csdn.net/m0_68464159/article/details/139887249

版权

一级，二级路由使用

（1）下载路由库 npm install react-router-dom@5

（2）Aa.js

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Bb from "./Bb";
import Cc from "./Cc";
import Dd from "./Dd";

export default function Aa(){
    return (
        <Router>
            <div>
                <ul>
                    <li><Link to="/Bb">Bb</Link></li>
                    <li><Link to="/Cc">Cc</Link></li>
                    <li><Link to="/Dd">Dd</Link></li>
                </ul>
                <Switch>
                    <Route path="/Bb"> <Bb/></Route>
                    <Route path="/Cc"> <Cc/></Route>
                    <Route path="/Dd"> <Dd/></Route>
                </Switch>
            </div>
        </Router>
    );
}

（3）Bb.js

import {Link, Route, Switch} from "react-router-dom";
import Ee from "./Ee";

export default function Bb () {
    return (
        <div>
            <ul>
                <li><
                    Link to="/Bb/Ee">eee</Link>
                </li>
            </ul>
            <Switch>
                <Route path="/Bb/Ee"> <Ee /> </Route>
            </Switch>
        </div>
    );
}

（4）Cc.js

import React from 'react';

export default function Cc() {
    return (
        <div>
            <h1>Welcome to the cc Page</h1>
        </div>
    );
}

（5）Dd .js

import React from 'react';

export default function Dd (){
    return (
        <div>
            <h1>Welcome to the dd Page</h1>
        </div>
    );
}

（6）Ee.js

import React from 'react';

export default function Ee() {
    return (
        <div>
            <h1>Welcome to the EE Page</h1>
        </div>
    );
}