为每个文件夹反应嵌套路由

Question

我需要帮助来了解路由在 React 中的工作原理。目前我所有的路由都定义在 App.js 文件中，如下所示：

function App() {
    return (
    <Fragment>
      <div id="sys_slot">
        <Routes>
          <Route path="/" element={<Dashboard />}/>
          <Route path="/dashboard/*" element={<Dashboard />} />
          <Route path="/wordy/*" element={<Wordy />} />

              <Route path="/wordy/learn" element={<LearnWindow />} />
                  <Route path="/wordy/learn/rumbo" element={<SomeOtherComponent />} />

              <Route path="/wordy/rev" element={<RevWindow />} />

          <Route path="/cetrec/*" element={<Cetrec />} />
        </Routes>
      </div>
      <BottomNav />
    </Fragment>
    );
}

如何将这些嵌套路由 (/wordmaster/anything_here/anything_here_again) 分离到它们的组件文件夹中？

另外，这个Routes标签到底是干什么的，对组件的渲染有什么作用吗？

我可以在 return 代码中的任何地方使用它吗？我可以在定义这些路由之前使用它（调用 Link 路径）吗？

我正在使用最新的 RRD 版本。

非常感谢您提供的任何指导。

Answer 1

How can I segregate these nested routes ("/wordmaster/anything_here/anything_here_again") into their component folders?

您可以将这些路由移动到您要呈现它们的组件中。它们将再次呈现为 Routes 组件。

示例：

App - 呈现 base/root 路由，通配符 * 附加到路由路径，以便 sub-routes 可以匹配。

<Routes>
  <Route path="/" element={<Dashboard />} />
  <Route path="/dashboard/*" element={<Dashboard />} />
  <Route path="/wordy/*" element={<Wordy />} />
  <Route path="/cetrec/*" element={<Cetrec />} />
</Routes>

Wordy - 呈现相对 link 和路径。

<ul>
  <li>
    <Link to="learn">Learn</Link>
  </li>
  <li>
    <Link to="learn/rumbo">Rumbo</Link>
  </li>
  <li>
    <Link to="rev">Rev</Link>
  </li>
</ul>
<Routes>
  <Route path="learn" element={<LearnWindow />} />
  <Route path="learn/rumbo" element={<SomeOtherComponent />} />
  <Route path="rev" element={<RevWindow />} />
</Routes>

您可以根据需要继续细分路由。

Also, what exactly does this Routes tag do, does it play any role in rendering of the component?

它确实在组件的渲染中发挥作用。它是采用子路由、计算最佳匹配并呈现它的组件。

Routes source

/**
 * A container for a nested tree of <Route> elements that renders the branch
 * that best matches the current location.
 *
 * @see https://reactrouter.com/docs/en/v6/api#routes
 */
export function Routes({
  children,
  location
}: RoutesProps): React.ReactElement | null {
  return useRoutes(createRoutesFromChildren(children), location);
}

Can I use it anywhere in the return code and can I use it(call a Link to path) before these Routes are defined?

在渲染 Route 组件的任何地方使用 Routes 组件。 Routes 的唯一有效子项是 Route 和 React.Fragment，所有 Route 组件只能是 Routes 组件或另一个 Route 的子组件（ 在嵌套路由的情况下 ）。链接和路由可以相互独立声明，但是link 到不存在的路由没有多大意义。

为每个文件夹反应嵌套路由

React nested routes for every folder

directory-structure

reactjs

react-router

react-router-dom

react-hooks