react 子路由标签
时间: 2023-07-05 21:27:22 浏览: 54
在 React 中,通常使用 `react-router-dom` 库来实现路由功能。其中,子路由可以通过嵌套路由的方式实现。
在使用嵌套路由时,我们可以在父路由组件中定义一个或多个子路由组件。在子路由组件中,我们可以使用 `Route` 组件来匹配路由路径,并渲染对应的组件。下面是一个示例:
```jsx
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
}
function Topics() {
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to="/topics/rendering">Rendering with React</Link>
</li>
<li>
<Link to="/topics/components">Components</Link>
</li>
<li>
<Link to="/topics/props-v-state">Props v. State</Link>
</li>
</ul>
<Route path="/topics/rendering" component={Rendering} />
<Route path="/topics/components" component={Components} />
<Route path="/topics/props-v-state" component={PropsVsState} />
</div>
);
}
```
在这个例子中,`Topics` 组件是父路由组件,它有三个子路由组件:`Rendering`、`Components` 和 `PropsVsState`。在 `Topics` 组件中,我们通过 `Link` 组件来定义子路由的链接,通过 `Route` 组件来匹配路径并渲染对应的组件。
需要注意的是,在嵌套路由中,子路由的路径应该是相对于父路由的路径的。例如,在上面的例子中,`Rendering` 组件的路径是 `/topics/rendering`,而不是 `/rendering`。