react 路由使用
时间: 2023-08-23 11:20:25 浏览: 48
React Router 是一个为 React 应用程序提供路由功能的第三方包。它可以帮助我们在 React 应用程序中 URL,使得用户能够通过 URL 直接访问到特的页面。
使用 React Router,你需要首先安装它。可以通过以下命令来安装:
```
npm install react-router-dom
```
然后在应用程序中引入路由相关的组件和方法:
```javascript
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
```
其中,`BrowserRouter` 是一个用于包裹整个应用程序的组件。`Switch` 组件用于包裹多个 `Route` 组件,用于匹配 URL 和组件。`Route` 组件用于定义每个 URL 对应的组件,`Link` 组件用于定义每个链接。
下面是一个简单的例子:
```javascript
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
```
在这个例子中,我们定义了三个组件:`Home`、`About` 和 `Users`。在 `App` 组件中,我们使用 `Router` 包裹整个应用程序,并在组件中引入了三个链接,分别对应 `Home`、`About` 和 `Users` 组件。使用 `Switch` 和 `Route` 组件,我们将每个 URL 映射到相应的组件。
在这个例子中,如果用户访问 `/about`,则会显示 `About` 组件;如果用户访问 `/users`,则会显示 `Users` 组件;如果用户访问 `/`,则会显示 `Home` 组件。