在 React 应用中,可以使用第三方库 React Router 来实现路由的功能,React Router 提供了多种路由实现的方式。
一般来说,React Router 应该在 Router
组件中进行配置。下面给出一种使用 BrowserRouter
的简单示例:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;
function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
在这个示例中,我们首先引入了 React Router 中常用的组件和函数(BrowserRouter
、Route
、Switch
、Link
),然后在 App
函数中使用了 Router
组件来进行路由的配置,其中:
nav
中添加了几个Link
组件,用于导航到不同的页面;Switch
中添加了几个Route
组件,用于匹配 URL 并渲染对应的组件;
其中 exact
表示精确匹配,如果不加 exact
的话,路由 /about
也会显示 Home
页面。
接下来介绍一些常用的 Route
组件的属性,你可以根据实际需要来按需使用:
path
:表示路由匹配的 URL,可以使用:
表示占位符,例如/users/:id
;component
:表示路由匹配成功后需要渲染的组件;exact
:表示是否精确匹配 URL;render
:表示需要渲染的组件,可以使用函数的形式来动态生成组件;children
:表示需要渲染的子组件,不管 URL 是否匹配,此组件都会被渲染;location
:表示当前路由的位置对象,用于在组件中获取 URL 相关信息。