reactjs 下拉父菜单路由不起作用
reactjs dropdown parent menu routing not working
我已经为下拉子菜单创建了一个路由器
<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
首先,不需要将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>
);
}
我已经为下拉子菜单创建了一个路由器
<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
首先,不需要将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>
);
}