简述如何使用4.0版本的 React Router?
React Router v4采用了一种全新的、组件化的路由配置方式,下面我简单介绍一下使用方式。
- 安装:在开始使用React Router之前,我们需要先在项目中安装它。
npm install react-router-dom
- 导入组件:在你的React组件文件中,需要导入React Router提供的几个组件。
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
- 配置路由:使用
<Router>
组件包裹整个应用,然后使用<Route>
组件来定义各个页面的路由。
<Router>
<div>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
在这个例子中,我们定义了两个路由:”/”(首页)和”/about”(关于页面)。我们使用<Switch>
组件来只渲染路径匹配的第一个<Route>
或<Redirect>
。然后我们使用<Link>
组件来创建导航链接。
- 创建页面组件:每个
<Route>
组件都对应一个React组件,当URL匹配到该路由的path时,就会渲染对应的组件。
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
以上就是React Router 4的基本使用方法。