使用参数id响应路由器路由

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路线将如下所示:课程/k-8年级/早期数学。

我想做什么

• 当节页到达时，添加一个新的id参数。视频课程id。所以应该是:课程/k-8年级/早教/数学/视频。
• 单击按钮概述时。添加url #概述。所以应该是courses/k-8-grades/early-math/videoId#overview.
• 当点击按钮搜索。删除url #概述，添加#搜索。所以这将是课程/k-8年级/早期数学/视频it #搜索。

所以我尝试的是：：

• 使用重定向。当到达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 */}

• 在章节页面中添加教训id onInit。但是如果我手动添加

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

当它变成courses/k-8-grades/fdfdf而不是courses/k-8-grades/early-math/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课程/k-8年级/早期数学之前，我需要路径名。

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

在章节中，我用的是“建议”，它的效果很神奇。

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

不幸的是，它并没有完全解决我的问题:预期的行为:当前，当访问Page时，我的网址是：

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>
  );
}

例如沙箱。

Answer 2

所面临的挑战是，您正在尝试从同一个父节点创建两个层次深的嵌套路由。

要解决这个问题，请转到<CoursesPage/>并创建一个新的<Route/> 在此链接中使用useRouteMatch钩子。这样，您现在就可以像在<Route />中一样访问CategoriesPage了。

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

转到<CoursesPage/>组件以访问组件<Route />

const CoursesPage = () =>{
let {path} = useRouteMatch()

return(
    <div>
        {/* Your desired Links */}
          <Switch>
            <Route path={`${path}`}>
                <div>We are here on CoursesPage</div>
            </Route>
            <Route path={`${path}/:videoId`}>
                <VideoId/>
            </Route>
            <Route path={`${path}/:videoId#overview`}>
                <VideoIdOverView/>
            </Route>
            <Route path={`${path}/:videoId#search`}>
                <VideoIdSearch/>
            </Route>
        </Switch>
    </div>
   
)}

现在，您可以使用上面的单独嵌套路由，例如：

const VideoId = () =>{
let { videoId } = useParams(); //make the destructured property name same with paths declared above
return (
    <div>
        {videoId}
    </div>
)}