React路由和嵌套路由使用的详细步骤

先安装路由才能使用：

npm install react-router-dom --save-dev

以下是我的示例代码：

首先要在你的src下面创建一个pages的文件夹：

pages文件夹下面有Footers.jsx ,Login.jsx ,One.jsx ,Test.jsx ,Two.jsx 以下文件

注意以下我的代码中不理解有注释可以看：App.js中的Test是嵌套路由，代码复制粘贴打开是这样的：

如果想看Test的嵌套，需要把网址加/test，或者你在代码中把test的配置默认打开显示

示例代码：（Footers和Login里面是我的练习）

App.js中：

import logo from './logo.svg';
import './App.css';
// 路由引入用哪个再别的页面也要引入
import { BrowserRouter as Router,Routes,Route, Link} from 'react-router-dom';

// 引入Login
import Login from './pages/Login';
// 引入Footers
import Footers from './pages/Footers';
// 引入Test
import Test from './pages/Test';

// 引入One
import One from './pages/One';
// 引入Two
import Two from './pages/Two';


function App() {
  return (
    <div className="App">

      <Router>

        {/* <ul>
          <li><Link to="/">点击显示login页面</Link></li>
          <li><Link to="/footers">点击显示footers页面</Link></li>
        </ul> */}
        <Routes>

{/* 因为path配置路由默认是Login，可以通过修改链接换成footers，test查看，查看test可以看到嵌套路由*/}
          <Route exact path="/" element={<Login/>} />
          <Route exact path="/footers" element={<Footers/>} />
        
        
        
        {/* test是嵌套路由 */}
          <Route path="/test" element={<Test/>}>
          <Route  path="one" element={<One/>} />
          <Route  path="two" element={<Two/>} />
          </Route>



        </Routes>
      </Router>
    </div>
  );
}

export default App;

Footers.jsx中:

import React from "react"
class Footers extends React.Component {
    constructor(props) {    
        super(props);
        this.state = {
            str:111111,
            name:'zhsngasn'
        }
        this.xiustr = this.xiustr.bind(this)
    }
    xiustr(){
        this.setState({
            str:222222
        })
        console.log(124567890);
        
    }
    render() { 

        const upname = (e)=>{
            this.setState({
                name:e.target.value
            })
            console.log(e.target.value);
            
        }

        let arr = []
        const checkValue = (e)=>{
            if(arr.includes(e.target.value)){
                 arr.splice(arr.indexOf(e.target.value),1)
            }else{
                arr.push(e.target.value)
            }
            
            console.log(arr);
        
        }

        return (
            <div>
                wo我是footers底部---str:{this.state.str}
                <button onClick={this.xiustr}>class修改事件</button>

                <hr></hr>
               name: {this.state.name}
            
                <input type="text" value={this.state.name} onChange={upname}></input>

                <div>
                    <input id="box1" onChange={checkValue} type="checkbox" value="Box1"/>
                    <label htmlFor="#box1">Box 1</label>
                </div>
                <div>
                    <input id="box2" onChange={checkValue} type="checkbox" value="Box2"/>
                    <label htmlFor="#box2">Box 2</label>
                </div>
                <div>
                    <input id="box3" onChange={checkValue} type="checkbox" value="Box3"/>
                    <label htmlFor="#box3">Box 3</label>
                </div>
                <div>
                    <input id="box4" onChange={checkValue} type="checkbox" value="Box4"/>
                    <label htmlFor="#box4">Box 4</label>
                </div>

                <button>提交</button>
            </div>
            
        )
        
    }
} 
export default Footers      

Login.jsx中:

import React, { useState,useEffect } from 'react';

export default function Login() {

    const [b,setchangB] = useState(123456)
    const [a,setA] = useState("nihao")    
        
    useEffect(()=>{
        console.log("useEffect")
    
    },[])
     
    
    
   const abc = () => {
  
        setchangB(()=>{
            return 8888888
        })
        
    }

    const xiu = () => {
        setA(()=>{
            return "xiughello world"
        })
    }


    return(
        <div className="container"> 
            <button onClick={abc}>修改b</button>
            <button onClick={xiu}>修改b</button>
            logoin 文件---b:{b}---a:{a}


            <hr></hr>

        
           
        </div>
    )
    
}

One.jsx中:

export default function One(){
    return(
        <div>我是One页面</div>
    )
}

Test.jsx中:

// test用到了link就只引link就行
import { Link,Outlet } from 'react-router-dom';

export default function Test(){
    return(
        <div>
           <h1>我是嵌套路由，test页面</h1> 
<Link to="/test/one">点击跳转One页面</Link>
<hr/>
<Link to="/test/two">点击跳转Two页面</Link>

<Outlet></Outlet>
        </div>
    )
}

Two.jsx中：

export default function Two(){
    return(
        <div>我是Two页面</div>
    )
}