reactjs下拉父菜单路由不起作用

Question

我已经为下拉子菜单创建了一个路由器

<Route path="/setup" component={Setup}>
     <Route path="/setup/:employee" component={Employee}/>
     <Route path="/setup/:company" component={Company}/>
     <Route path="/setup/:user" component={User}/>
</Route>

当我使用 /setup/employee 时，它会起作用，但父菜单 /setup 和其他子菜单不起作用，不起作用

Answer 1

首先，它不需要将 Route 作为孩子添加到另一个。更改您的 Route 组件，如下所示：

 <Route path="/setup" component={Setup}/>
 <Route path="/setup/:employee" component={Employee}/>

另外，这种使用路由的方式也行不通。假设你要打开/setup/1，因为使用/setup/:employee上面的/setup/:company和/setup/:user路由器就明白第一个了。您无法使用其他参数路由到该地址。 router 怎么能看懂你发了什么？员工、公司或用户？您应该更改其他路线。您可以只使用一次带有参数的路线样式。 但是如果你想用这种方式做一些事情，你可以创建一个路由，比如：

<Route path="/setup/:component/:page" component={MyCustomComponent}/>

并实现MyCustomComponent组件，如下所示：

function MyCustomComponent() {
  let { component, page } = useParams();
  switch (component) {
    case "FirstChild":
      return <FirstChild page={page} />;
    case "SecondCHild":
      return <SecondChild page={page} />;
    default:
      return <NoneOfChildren />;
  }
}

最后，这些是子组件：

function NoneOfChildren(){
  return (
    <div>
      <h3>Nothing have been sent as page!</h3>
    </div>
  );
}

function SecondChild(props) {
  return (
    <div>
      <h3>Second Page: {props.page}</h3>
    </div>
  );
}

function FirstChild(props) {
  return (
    <div>
      <h3>First Page: {props.page}</h3>
    </div>
  );
}