如何配置 React-Router 实现路由切换？
React-Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。以下是一个基本的 React-Router 使用示例：
首先，你需要安装 react-router-dom 库，可以通过 npm 或者 yarn 进行安装：
npm install react-router-dom
或者
yarn add react-router-dom
然后在你的应用中配置路由：
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
);
}
export default App;
在这个例子中，我们首先引入了 BrowserRouter, Route 和 Switch 组件。然后在 Router 组件中定义了几个路由：
- 使用
exact path="/" component={Home}定义了根路由，当 URL 为 ‘/’ 时，将渲染Home组件。 - 使用
path="/about" component={About}定义了 ‘/about’ 路由，当 URL 为 ‘/about’ 时，将渲染About组件。 - 最后一个
Route没有path属性，它将匹配所有未被前面的Route匹配的路由，因此它通常被用来显示 404 页面。
Switch 组件用于包裹 Route，它会渲染与当前访问地址匹配的第一个 Route 或 Redirect。如果没有 Switch，路由规则将会匹配所有符合条件的路由组件，而不仅仅是第一个。
这就是 React-Router 的基本使用方法，你可以根据你的需求配置更多的路由。