React-router-dom routing nesting allows multiple menu pages to switch between each other. Junior scholars can pick up and tackle most complex projects.

The parent component

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;
Copy the code

The parent component is introduced into the page to display

Home components

function Home () {
    return (
        <div>
            <h2>This is the Home</h2>
        </div>)};export default Home;
Copy the code

The about component

  • UseParams () gets the object that returns the key and value pairs of the URL argument
  • Component that is rendered only when the hash value in the path is exactly the same as that of path when exact is true
import { useRouteMatch,Link,Switch,Route,useParams } from 'react-router-dom'

function About () {
    let { path, url } = useRouteMatch();
    console.log(path);
    return (
        <div>
            <h2>About the title</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 returns the key/value pair object of the URL parameter
// Components that are rendered only when the hash value in the path is true

function Topic () {
    console.log('Print data');
    console.log(useParams());
    let { about } = useParams();
    console.log(about);
    if ( about === 'rendering' ) {
        return text();
    } else if ( about === 'components' ) {
        return text1();
    } else {
        returntext2(); }};function text () {
    return (
        <div>This is the text 111111</div>)};function text1 () {
    return (
        <div>This is the literal Component</div>)};function text2 () {
    return (
        <div>This is the word prop-V-state</div>)};export default About;
Copy the code

Diary 1,