react-router-dom 路由嵌套

react-router-dom路由嵌套,解决多个菜单页面进行相互切换。初级学者可以上手，能解决大多数复杂型项目。

父组件

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Link,
    Route
} from 'react-router-dom';
import Home from './Home'
import About from './About'

class Nested extends React.Component {
    render () {
        return (
            <Router>
                <div>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/about">about</Link>
                        </li>
                    </ul>
                </div>
                <Switch>
                    <Route exact path="/">
                        <Home></Home>
                    </Route>
                    <Route path="/about">
                        <About></About>
                    </Route>
                </Switch>
            </Router>           
        );
    };
};

export default Nested;

把父组件引入到页面才能显示

home组件

function Home () {
    return (
        <div>
            <h2>这是Home</h2>
        </div>
    )
};


export default Home;

about组件

• 通过useParams() 获取返回URL参数的键、值对的对象
• exact 为true时 路径中的hash值必须与path完全一致才进行渲染的组件

import { useRouteMatch,Link,Switch,Route,useParams } from 'react-router-dom'

function About () {
    let { path, url } = useRouteMatch();
    console.log(path);
    return (
        <div>
            <h2>
                About标题
            </h2>
            <ul>
                <li>
                    <Link to={`${url}/rendering`}>Rendering with React</Link>
                </li>
                <li>
                    <Link to={`${url}/components`}>Components</Link>
                </li>
                <li>
                    <Link to={`${url}/props-v-state`}>Props v.State</Link>
                </li>
            </ul>
            <Switch>
                <Route exact path={path}>
                    <h3> Please select a topic </h3>
                </Route>
                <Route path={`${path}/:about`}>
                    <Topic />
                </Route>
            </Switch>
        </div>
    ) 
};

// useParams  返回URL参数的键、值对的对象
// exact 为true时  路径中的hash值必须与path完全一致才进行渲染的组件

function Topic () {
    console.log('打印数据');
    console.log(useParams());
    let { about } = useParams();
    console.log(about);
    if ( about === 'rendering' ) {
        return text();
    } else if ( about === 'components' ) {
        return text1();
    } else {
        return text2();
    }
};

function text () {
    return (
        <div>
            这是文字111111
        </div>
    )
};
function text1 () {
    return (
        <div>
            这是文字component
        </div>
    )
};
function text2 () {
    return (
        <div>
            这是文字prop-v-state
        </div>
    )
};

export default About;

日记一日