react 路由 二级路由
时间: 2023-08-31 18:08:32 浏览: 53
在 React 中,使用 React Router 可以轻松地创建二级路由。下面是一个简单的示例来说明如何创建二级路由:
首先,确保你已经安装了 React Router 库。可以使用以下命令来安装:
```
npm install react-router-dom
```
接下来,在你的应用程序中导入所需的模块:
```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
```
然后,在你的组件中定义路由。下面是一个示例:
```jsx
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/dashboard" component={Dashboard} />
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
<Switch>
<Route path="/dashboard/profile" component={Profile} />
<Route path="/dashboard/settings" component={Settings} />
</Switch>
</div>
);
}
function Profile() {
return <h3>Profile</h3>;
}
function Settings() {
return <h3>Settings</h3>;
}
```
在上面的示例中,我们创建了一个 `Router` 组件,并在其中定义了导航菜单和路由规则。`Route` 组件用来定义路径和组件的映射关系。`Switch` 组件用来保证只有一个路由匹配成功。
在 `Dashboard` 组件中,我们创建了另一个嵌套的 `Switch` 组件,以支持二级路由。在这个嵌套的 `Switch` 中,我们定义了 `/dashboard/profile` 和 `/dashboard/settings` 这两个路径与对应的组件的映射关系。
最后,将 `App` 组件渲染到 DOM 中:
```jsx
ReactDOM.render(<App />, document.getElementById('root'));
```
通过以上代码,你就可以在你的应用程序中创建二级路由了。在导航菜单中点击链接将会渲染相应的组件。例如,点击 `/dashboard` 将会显示 `Dashboard` 组件,点击 `/dashboard/profile` 将会显示 `Profile` 组件。
希望这个示例能帮助你理解如何在 React 中创建二级路由。如有其他问题,请随时提问!