react-router-dom学习

前言：页面太多的时候，就不能用枚举了。还是路由比较靠谱。

 

 

官方网站：https://reactrouter.com/en/main

官方示例：v5版本（建议不要再看了） https://v5.reactrouter.com/web/guides/quick-start

 

GitHub官方代码：

https://github.com/remix-run/react-router/blob/dev/examples/basic/src/App.tsx

 

 

第三方学习文档：

https://www.w3schools.com/react/react_router.asp

示例：
https://blog.csdn.net/m0_64875238/article/details/130024751

 

 

v6版本升级功能：https://zhuanlan.zhihu.com/p/474610578

1，v6中已经没有Switch。v5时有Switch组件，取而代之的Routes组件。

2，嵌套更加清晰。

<Routes>
              <Route element={<Home />}
                  path="/home"
              ></Route>
              <Route element={<List/>}
                  path="/list"
              ></Route>
              <Route element={<Layout/>}
                  path="/children"
              >
                  <Route element={<Child1/>}
                      path="/children/child1"
                  ></Route>
                  <Route element={<Child2/>}
                      path="/children/child2"
                  ></Route>
              </Route>
           </Routes>

3，新版本路由引入 Outlet 占位功能，可以更方便的配置路由结构，不需要像老版本路由那样，子路由配置在具体的业务组件中，这样更加清晰，灵活。