React路由

 npm install react-router-dom@5

Aa.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Bb from "./Bb";
import Cc from "./Cc";
import Dd from "./Dd";
function Aa(){
    return (
    <Router>
        <div>
                <ul>
                    <li><Link to="/">Bb</Link></li>
                    <li><Link to="/Cc">Cc</Link></li>
                    <li><Link to="/Dd">Dd</Link></li>
                </ul>

            {/* 路由的切换点 */}
            <Switch>
                <Route path="/Dd"> <Dd /> </Route>
                <Route path="/Cc"> <Cc /> </Route>
                <Route path="/"> <Bb /> </Route>
            </Switch>
        </div>
    </Router>
);
}
export default Aa;

Ba.js 

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

function Bb () {
    return (
        <div>
            <ul>
                <li><Link to="/Bb/Ee">eee</Link></li>
            </ul>

            <Switch>
                <Route path="/Bb/Ee"> <Ee /> </Route>
            </Switch>
        </div>
    );
}
export default Bb;

Cc.js 

import React from 'react';

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

Dd.js

import React from 'react';

function Dd (){
    return (
        <div>
            <h1>Welcome to the dd Page</h1>
            {/* 你可以在这里添加更多的内容，比如段落、列表等 */}
        </div>
    );
}
export default Dd;

Ee.js

import React from 'react';

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