我如何才能完全匹配深度嵌套在反应路由器 6 中的路由？

Question

如何将完整路由与路径“users/:id/settings”匹配，但同时仅渲染每个路径中的组件：

• /users -> 只呈现用户列表
• /users/:id -> 只呈现用户配置文件
• /users/:id/settings -> 只呈现用户设置。

     <Route path="users" element={<h2>LIST PROJECTS</h2>}>
       <Route path=":id" element={<h2>PROJECT id</h2>}>
          <Route path="settings" element={<h2>PROJECT SETTINGS</h2>} />
        </Route>
     </Route> 

Answer 1

我已经解决了这个问题：

1. 创建索引路由 ("/") 来封装子级，如下所示：

    - /              // Level 1 routes index route
    - users          // level 1 route
       - /             // Level 2 routes index route                  
       - :id           // level 2 route
       - settings      // level 2 route

    - posts          // level 1 route
       - /             // Level 2 routes index route
       - :id           // level 2 route
       - settings      // level 2 route
       - ...

我将 1 级路由视为我的应用程序的数据集合（用户、帖子等），将 2 级路由视为与更高级别集合中的特定项目相关的任何子路由 (:userId, 设置等)

1. 使用 react-router-v6 中的 <Outlet /> 组件作为每个父路由中要渲染的元素。该索引下子路由的Outlet is responsible for rendering all the children 组件，因此我们在索引路由上使用element={<Outlet />}，而不是直接渲染React 组件。

这是一个使用索引路由渲染 Outlet 组件的示例：

          <Route path="users"element={ <Outlet /> } >
            <Route path="/" element={<h2>LIST USERS</h2>} />
            <Route path=":id" >
               <Route path="/" element={<React.Fragment>
                                         <h2>USER id</h2>
                                         <Outlet />
                                       </React.Fragment>} />
               <Route path="settings" element={<h2>USER SETTINGS</h2>} />
            </Route>
          </Route>

这是一个使用 useRoutes 钩子的更完整的方法，我们可以用它更干净地编写相同的配置作为一个简单的 JS 对象：

    import {Outlet, useRoutes} from "react-router-dom"
    
    const App = () => {

      let routeElement = useRoutes([
        {
          path: "/",
          element: <GlobalPageTemplate />,
          children: [
            {
              path: "users",
              element: <Outlet />,
              children: [
                { path: "/", element:<h1>LIST USERS <h1/> },
                {
                  path: "/:id",
                  children: [
                    { path: "/", element: <h1>USER ID</h1> },
                    { path: "/settings", element: <h1>USER SETTINGS</h1> },
                  ],
                },
              ],
            },
            {
              path: "posts",
              element: <Outlet />,
              children: [
                { path: "/", element: <h1>LIST POSTS</h1> },
                {
                  path: "/:id",
                  children: [
                    { path: "/", element: <h1>POST ID</h1> },
                    { path: "/settings", element: <h1>POST SETTINGS</h1> },
                  ],
                },
              ],
            },
            {
              path: "teams",
              element: <Outlet />,
              children: [
                { path: "/", element: <h1>LIST TEAMS</h1> },
                {
                  path: "/:id",
                  children: [
                    { path: "/", element: <h1>TEAMS ID</h1> },
                    { path: "/settings", element: <h1>TEAM SETTINGS</h1> },
                  ],
                },
              ],
            },
          ]
        }
      ]);
    
      return routeElement
    }

Answer 2

import React from "react";
import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
<BrowserRouter>
      <Navigation />
      <Switch>
        <Route
          exact
          path="/"
          component={Home}
          
        />
        <Route exact path="/user" component={User} />
        <Route
          exact
          path="/user/:id/setting"
          render={(props) => {
            return <Your Component {...props} />;
          }}
        />
       
      </Switch>
    </BrowserRouter>

//在你的组件中 // AllProduct 来自数据库或您要匹配的项目首先导入它

let component = (props) => {
  let compo= props.location.state;
//if state is undefined can be access with params
if (!compo) {
const id = props.match.params.id;
compo = AllProduct.find((items) => items.id == id);

}