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 和其他子菜单不起作用 not working

Answer 1

首先，不需要将Route作为子Route添加到另一个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>
  );
}

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

reactjs dropdown parent menu routing not working

reactjs

react-router

router

tailwind-css