React 路由可以通过 react-router-dom
库实现。以下是一个简单的路由配置示例:
- 安装
react-router-dom
库
npm install react-router-dom
- 在项目中创建路由组件
在 src
目录下创建一个名为 routes.js
的文件,并编写路由配置:
import React from 'react'; import { BrowserRouter as Router } from 'react-router-dom'; import Routes from './routes'; const App = () => ( <Router> <Routes /> </Router> ); export default App;
以上路由配置示例中,我们定义了三个路由:
/
显示Home
组件/about
显示About
组件/contact
显示Contact
组件
当用户访问 /
、/about
或 /contact
时,Routes
组件会渲染对应的组件。同时,在 Routes
组件中使用了 Switch
和 Route
组件来实现路由匹配和渲染。