react 约定式路由
摘要：
1.约定式路由的概念 
2.约定式路由的优点 
3.约定式路由的实现方式 
4.约定式路由的注意事项 
5.约定式路由的示例代码
正文：
1.约定式路由的概念
React 约定式路由是一种在 React 应用中实现路由的方法。它通过约定式编程的方式，让路由的配置更加简洁和易于维护。在 React Router 4 中，约定式路由被引入并得到了广泛应用。
2.约定式路由的优点
相较于传统的路由配置方式，约定式路由具有以下优点：
- 配置简单：使用约定式路由，只需要在组件中使用固定的命名规范，就可以自动为组件生成路由。 
- 易于维护：由于路由配置与组件代码分离，当需要修改路由时，只需要修改配置文件，而无需修改组件代码。 
- 提高代码复用性：通过约定式路由，可以轻松地为不同的页面或平台创建相同的路由结构。
3.约定式路由的实现方式
在 React Router 4 中，约定式路由主要通过使用 `Route` 和 `Switch` 组件来实现。以下是一个简单的约定式路由示例：
```javascript 
import React from "react"; 
import { Route, Switch } from "react-router-dom";
function App() { 
  return ( 
    <div> 
      <Switch> 
        <Route exact path="/" component={Home} /> 
        <Route path="/about" component={About} /> 
        <Route path="/contact" component={Contact} /> 
      </Switch> 
react router v6 文档    </div> 
  ); 
}
export default App; 
```
在这个示例中，我们通过使用 `Switch` 和 `Route` 组件，为三个不同的路径（`/`、`/about` 和 `/contact`）创建了路由。当用户访问这些路径时，相应的组件（`Home`、`About` 和 `Contact`）将被渲染。
4.约定式路由的注意事项
在使用约定式路由时，需要注意以下几点：
- 路由的命名需要遵循一定的规范，例如：使用 kebab-case（短横线分隔）或 camelCase（下划线分隔）等。 
- 对于复杂的路由配置，可能需要使用嵌套的 `Switch` 和 `Route` 组件。 
- 如果需要为某个路由配置动态参数，可以使用 `Route` 组件的 `params` 属性。
5.约定式路由的示例代码
以下是一个使用约定式路由的完整示例：
```javascript 
import React from "react"; 
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
function Home() { 
  return <div>Home</div>; 
}
function About() { 
  return <div>About</div>; 
}
function Contact() { 
  return <div>Contact</div>; 
}
function App() { 
  return ( 
    <Router> 
      <div> 
        <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> 
      </div> 
    </Router> 
  ); 
}
export default App; 
```
在这个示例中，我们创建了一个简单的 React 应用，使用约定式路由为三个路径（`/`、`/about` 和 `/contact`）创建了路由。同时，我们还添加了一个导航栏，用于显示这三个链接。