React入门路由配置方法
React是一个流行的JavaScript库，被广泛用于构建用户界面。它的特点之一是支持单页面应用，其中路由配置起着重要的作用。本文将介绍React入门路由配置方法，帮助读者了解如何在React应用中使用路由进行页面导航。
一、安装React Router
React Router是React官方推荐的用于路由管理的库。要使用React Router，首先需要在项目中安装它。可以通过npm或yarn来安装React Router：
```
npm install react-router-dom
```
或
```
yarn add react-router-dom
```
安装完成后，即可在项目中使用React Router。
二、配置基本路由
在React应用中进行路由配置，首先需要在根组件（通常是App.js）中引入React Router的相关组件。然后，使用Router组件将所有其他组件包裹起来，并在其内部配置各个路由。
```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';
const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
};
export default App;
```
react router 6在上述代码中，首先引入了React、React Router的相关组件，并导入了Home、About和NotFound等组件。然后，使用Router组件将所有其他组件包裹起来，并在Switch组件内配置各个路由。其中exact关键字用于确保仅当路径完全匹配时才渲染组件，path属性用于指定路由路径，component属性用于指定对应的组件。
三、导航链接
为了能够在应用中实现页面导航，需要使用NavLink组件来创建导航链接，代替常规的a标签。NavLink在当前路由与链接路径匹配时会自动添加active类名，以便高亮显示当前活动的链接。
```jsx
import React from 'react';
import { NavLink } from 'react-router-dom';
const NavBar = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink exact to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
      </ul>
    </nav>
  );
};
export default NavBar;
```
在上述代码中，首先引入了React、React Router的NavLink组件。然后，在导航栏组件中使用NavLink来创建导航链接。exact关键字用于确保仅当路径完全匹配时才添加active类名，to属性用于指定链接路径。
四、传递参数