在一级路由中,如何跳转到二级路由
时间: 2024-02-09 21:12:35 浏览: 98
在一级路由中跳转到二级路由需要在一级路由的组件中使用路由链接(Route Link)或编程式导航(Programmatic Navigation)来实现。
使用路由链接,需要在一级路由组件的JSX中使用<Link>组件,设置to属性为二级路由的路径,例如:
```jsx
import { Link } from "react-router-dom";
function FirstLevel() {
return (
<div>
<h1>First Level Component</h1>
<Link to="/second-level">Go to Second Level</Link>
</div>
);
}
```
使用编程式导航,需要在一级路由组件的JSX中使用history对象的push方法,在方法的参数中传入二级路由的路径,例如:
```jsx
import { useHistory } from "react-router-dom";
function FirstLevel() {
const history = useHistory();
function goToSecondLevel() {
history.push("/second-level");
}
return (
<div>
<h1>First Level Component</h1>
<button onClick={goToSecondLevel}>Go to Second Level</button>
</div>
);
}
```
以上两种方式都可以实现在一级路由中跳转到二级路由。
阅读全文