如果用户手动修改 url 并点击 在 react-router-dom-6 中输入，如何从第 3 级嵌套路由重定向到 3rd 参数？

Question

我从react-router-dom官方github页面中获取了以下基本示例并进行了调整:

<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="parent/:id">
<Route index element={<FirstChild />} />
<Route path=":source" element={<SecondChild />} />
</Route>
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>

和布局

<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/parent/2">FirstChild</Link>
</li>
<li>
<Link to="/parent/2/editor">SecondChild</Link>
</li>
</ul>
</nav>

所以当我点击SecondChild路由链接时，我导航到myDomain/parent/2/editor。我想要实现的是，如果用户手动进入浏览器url并删除或修改最后一个参数，在我的情况下是editor。如果用户写入editor2并点击ENTER，我如何将用户重定向到myDomain/parent/2/editor?有人知道这在react-router-dom@6中是否可能吗?

演示

编辑

source是动态的。因此，还有其他带有路由"/parent/:id/…"的页面。例如

/parent/:id/labelbook 

我想重定向到正确的路由，以防用户在两个不同的场景中再次修改标签本或编辑器到正确的路由参数。将来可能会添加第三个场景。在reactrouter-dom 5中，我可以通过在参数旁边添加?来做到这一点，但现在这已经消失了。我可以写

<Route path=":source?" element={<SecondChild />} />

完成工作。

Answer 1

你可以在嵌套的层次呈现重定向。

首先，由于不清楚要在第二个嵌套级别呈现什么，我将提供几个示例。

示例#1:SecondChild组件完全呈现在"/parent/:id/editor"上，你想重定向任何其他嵌套路由到那里。

<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="parent/:id">
<Route index element={<FirstChild />} />
<Route path="editor" element={<SecondChild />} />
<Route path="*" element={<Navigate to="../editor" replace />} />
</Route>
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>

示例#2:SecondChild组件在"/parent/:id/:source"上呈现，并且显式地要从"/parent/:id/editor2"重定向到"/parent/:id/editor"。

<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="parent/:id">
<Route index element={<FirstChild />} />
<Route path=":source" element={<SecondChild />} />
<Route
path="editor2"
element={<Navigate to="../editor" replace />}
/>
</Route>
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>

示例# 3:如果你有一个特定的":source"值列表，那么你应该为每个值呈现显式路由。如果SecondChild组件依赖于是什么"源"那么我建议将其作为道具传递。任何没有显式匹配的路由都将被渲染为"*"NoMatch路由。

<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="parent/:id">
<Route index element={<FirstChild />} />
<Route path="editor" element={<SecondChild source="editor" />} />
<Route path="labelbook" element={<SecondChild source="labelbook" />} />
... etc ...
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>