javascript - 使用参数 id react 路由器路由

Question

我在路由内传递参数时遇到问题。
目前，我有这些路线:

<Route component={CategoriesPage} path={`/${AllRoutesEnum.COURSES}`} exact/>
<Route component={CoursesPage} path={`/${AllRoutesEnum.COURSES}/:id`} exact/>
<Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:id/:id`} exact/>

所以 SectionPage 路线看起来像这样:类(class)/k-8-grades/early-math
我想做的 :

当部分页面到达时添加一个新的 id 参数。视频类(class)编号。
所以应该是:类(class)/k-8-grades/early-math/videoId

单击按钮概览时。添加网址#overview。所以应该是类(class)/k-8-grades/early-math/videoId#overview。

单击按钮搜索时。删除 url #overview 添加 #search。所以应该是类(class)/k-8-grades/early-math/videoId#search

所以我尝试了:

使用重定向。当到达 SectionPage 时，以某种方式将 id 传递给重定向。但它失败了，因为路线没有正确匹配。

<Redirect from={`/${AllRoutesEnum.COURSES}/:id/:id/`} to={`/${AllRoutesEnum.COURSES}/:id/:id/test`} />
 {/* courses/early-math/early-math/test */}
<Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:id/:id/`} exact/>
{/* courses/k-8-grades/early-math */}

在 Section Page 添加类(class) ID onInit。但是如果我手动添加

import { useHistory } from "react-router-dom";
const history = useHistory();
history.push('fdfdf');

什么时候会变成 类(class)/k-8 年级/fdfdf 而不是 类(class)/k-8 年级/早期数学/fdfdf
更新
所以我想做的是创建一个 SectionRedirect 页面:

<Route component={CategoriesPage} path={`/${AllRoutesEnum.COURSES}`} exact />
<Route component={CoursesPage} path={`/${AllRoutesEnum.COURSES}/:a`} exact />
<Route component={SectionRedirectPage} path={`/${AllRoutesEnum.COURSES}/:a/:b/`} exact />
<Route component={SectionPage} path={`/${AllRoutesEnum.COURSES}/:a/:b/:id`} exact />

部分重定向页面推送 videoID。因为在获取正确的视频 ID 类(class)/k-8-grades/early-math 之前我需要路径名。

props.history.push(`${location.pathname}/${videoId}`);

在部分页面中，我使用了类似的建议，它产生了奇迹。

props.history.push({ hash: "overview" })

不幸的是，它并没有完全解决我的问题:
预期行为:
目前在访问页面部分时，我的网址是这样的:

courses/k-8-grades/early-math/videoId1#overview

单击第二个视频链接应将 url 更改为:

courses/k-8-grades/early-math/videoId2#overview

现实生活中的例子是 udemy 视频播放器。
使用以下方法找到解决方案:
在section.page

history.push({
      pathname: '/courses/k-8-grades/early-math/videoId'
    })

Answer 1

我认为主要问题是您使用 :id 引用路径的两个可变部分。 .
您正在尝试映射 courses/k-8-grades/early-math/至courses/:id/:id/ .
相反，我认为您应该将其映射为以下形式:courses/:a/:b/ .
添加 #overview或 #search到你可以这样做的路径:

history.push({ hash: "overview" })

示例实现:

function App() {
  return (
    <Router>
      <Switch>
        <Route
          component={CategoriesPage}
          path={`/${AllRoutesEnum.COURSES}`}
          exact
        />
        <Route
          component={CoursesPage}
          path={`/${AllRoutesEnum.COURSES}/:id`}
          exact
        />
        <Redirect
          exact
          from={`/${AllRoutesEnum.COURSES}/:a/:b/`}
          to={`/${AllRoutesEnum.COURSES}/:a/:b/videoId`}
        />
        <Route
          component={SectionPage}
          exact
          path={`/${AllRoutesEnum.COURSES}/:a/:b/videoId`}
        />
      </Switch>
    </Router>
  );
}

function SectionPage() {
  const history = useHistory();

  return (
    <div>
      <button onClick={() => history.push({ hash: "overview" })}>
        overview
      </button>
      <button onClick={() => history.push({ hash: "search" })}>search</button>
    </div>
  );
}

Example as sandbox.