react-router-dom6与5的嵌套路由区别

"react-router-dom": "5.3.0"

ComponentChuan-index.js

  render = () => (

        <div>

            <h1>组件传值</h1>

            <span><Link to="/ComponentChuan/FatherToSon">props传数据</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

            <span><Link to="/ComponentChuan/SonToFather">props传方法</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

            <span><Link to="/ComponentChuan/FatherToSon_ref">ref</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

            <span><Link to="/ComponentChuan/PubSubDemo">非父子</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

            <hr/>

            <div>

                <Route path="/ComponentChuan/FatherToSon" component={FatherToSon} ></Route>

                <Route path="/ComponentChuan/SonToFather" component={SonToFather} ></Route>

                <Route path="/ComponentChuan/FatherToSon_ref" component={FatherToSon_ref} ></Route>

                <Route path="/ComponentChuan/PubSubDemo" component={PubSubDemo} ></Route>

            </div>

        </div>

    )

 "react-router-dom": "^6.2.1",

一级路由页面：

 <Route path="/ComponentChuan" element={<ComponentChuan />}>

                            <Route path="/ComponentChuan/FatherToSon_ref" element={<FatherToSon_ref />}></Route>

                            <Route path="/ComponentChuan/PubSubDemo" element={<PubSubDemo />}></Route>

                            <Route path="/ComponentChuan/FatherToSon" element={<FatherToSon />}></Route>

                            <Route path="/ComponentChuan/SonToFather" element={<SonToFather />}></Route>

                        </Route>

嵌套路由页面：

render() {

        return (

            <div>

                <h1>ComponentChuan</h1>

                <span>  <Link to="/ComponentChuan/FatherToSon"> 父----》子(propS)</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

                <span><Link to="/ComponentChuan/SonToFather">父----》子props传方法</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

                <span><Link to="/ComponentChuan/FatherToSon_ref">ref</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

                <span><Link to="/ComponentChuan/PubSubDemo">非父子</Link></span>&nbsp;&nbsp;|&nbsp;&nbsp;

                <hr />

                <div className='context'>

                    {/* 嵌套路由的显示 */}

                    <Outlet></Outlet>

                </div>

            </div>

        )

    }