关于react-router的一些思考

在react开发过程中使用到react-router，项目中进行引入为

<Router>
        <Routes>
                 <Route path="*" element={<Layout />}  />
        </Routes>
</Router>

其中一个项目只能有一个Router，可以有多个Routes，而且可以嵌套使用。在Layout组件中我进行了如下配置

<div>
    <!--其他代码-->
</div>
<div>
    <Routes>
            <Route path="/" element={<Navigate to="/1" />} />
            <Route path="/1" element={<1 />} />
            <Route path="/2" element={<2 />} />
    </Routes>
</div>

会发现react在进行/1和/2转换时，并不会影响上面的<其他代码>的渲染，即路由变化并不会导致整个页面的重新渲染，而只是部分重新渲染，很神奇！

故本文主要探究routes内部route跳转原理，如何做到部分替换

-----------------------------------------------------------------------------------------------------------------------

参阅

react-router-dom中文文档

Reac-router中文文档

<Route>基本的责任在URL和自己的路径对应时渲染UI,在react-router实现中，不管<Route>匹配与否，对应组件一致渲染，不匹配时渲染null，匹配时渲染<Route>对应的组件