React 路由器：使用 url 参数重定向？

Question

在我的渲染函数中我有

<Route path="/classes/:course" render={(match) => (
   <Redirect to={`/classes/${match.params.course}/home`} />
)}>
   <Route path="/home" component={Home} />
</Route>

例如，如果“course”的参数是“BIO1001”，当我转到“/classes/BIO1001/”页面时，我想将页面重定向到“/classes/BIO1001/home”。以前我尝试简单地放置一个带有“from”和“to”的重定向标签，但遇到了URL实际上转到“/classes/:course/home”而不是“/classes/BIO1001/home”的问题

另外，路径=“/home”的嵌套路由是否会转到“/classes/BIO1001/home”？我不确定如何设置路径从前一个 url 开始的路线（在本例中从“/classes/:course/”开始）

Answer 1

第一个问题就在这里：

render={(match) => ( ...

该render函数获取一个包含属性的 props 对象match。您实际上所做的不是解构match属性，而是将整个props对象分配给变量match。这样你去访问的时候match.params就找不到了。

您需要大括号match来解构它。

render={({match}) => ( ...

第二个问题是两个组件的嵌套Route。我收到警告：

警告：不应在同一路径中使用<Route render>和；会被忽略<Route children><Route render>

因此，根据该警告，您可以看到您的内容Redirect被完全忽略，因为它来自render. 子进程Route被视为类的渲染函数Route。

我假设您有一门课程有多个子页面？如果没有设置，我们想强制 URL 包含“/home”？（我个人会做相反的事情，将“/home”重定向到课程根 URL）。

以前我尝试简单地放置一个带有“from”和“to”的重定向标签，但遇到了URL实际上转到“/classes/:course/home”而不是“/classes/BIO1001/home”的问题

根据文档，您可以在您的 中使用 params Redirect，但前提是它位于Switch.

这是执行此操作的示例代码：

const CoursePage = () => {
  // you can access arguments from the props or through hooks
  const { course, tab } = useParams();

  // not sure how you want to handle the different tabs

  return <div>Viewing Course {course}</div>;
};

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/classes/:course/:tab"><CoursePage/></Route>
      <Redirect from="/classes/:course" to="/classes/:course/home"/>
    </Switch>
  </BrowserRouter>
);

export default App;