react 怎么把路由挂载到应用上
时间: 2024-04-30 13:21:53 浏览: 5
要在 React 中使用路由,你需要安装一个叫做 `react-router-dom` 的库。你可以使用 `npm` 命令来安装它:
```
npm install react-router-dom
```
安装完成后,在你的应用中导入 `BrowserRouter` 和 `Route` 组件。`BrowserRouter` 组件会创建一个路由容器,而 `Route` 组件则会定义每个页面的路由规则。
下面是一个简单的示例代码:
```jsx
import { BrowserRouter, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</BrowserRouter>
);
}
function Home() {
return <h1>Home</h1>;
}
function About() {
return <h1>About</h1>;
}
function Contact() {
return <h1>Contact</h1>;
}
```
在这个示例中,我们通过 `BrowserRouter` 组件创建了一个路由容器,并在容器内定义了三个路由规则。当用户访问根路径 `/` 时,会渲染 `Home` 组件;当访问 `/about` 时,会渲染 `About` 组件;当访问 `/contact` 时,会渲染 `Contact` 组件。
你可以根据自己的需求,定义更多的路由规则和对应的组件。同时,你也可以使用 `Link` 组件来创建链接,让用户可以方便地跳转到不同的页面。