[ React路由与项目实践 | 青训营笔记 ]

React路由基础概念: React 路由是 React 应用中常用的路由管理工具，可以实现页面之间的跳转、路由参数传递等功能。 以下是 React 路由核心知识点：

1. React Router：React 路由库的官方名称，是一个开源的第三方库，提供了路由的管理和控制功能。
2. 路由组件：指用于路由匹配和跳转的组件，通常包括 <Route>、<Switch>、<Redirect> 等组件。
3. 路由参数：指在路由中传递的参数，通常通过 URL 参数、查询参数、state 等方式传递。
4. 路由守卫：指在路由跳转前、后进行处理的功能，可以用于身份验证、权限控制等。
5. 嵌套路由：指在路由中嵌套使用路由，通常用于实现页面的层级结构。
6. 动态路由：指根据路由参数动态生成路由的方式，通常用于实现类似详情页的功能。
7. 路由懒加载：指将路由组件进行动态加载的方式，可以优化应用的性能和加载速度。
8. BrowserRouter：React Router 中的一种路由类型，使用 HTML5 history API 实现路由管理。
9. HashRouter：React Router 中的一种路由类型，使用 URL 中的 hash 实现路由管理。
10. withRouter：React Router 提供的一个高阶组件，用于将非路由组件转换为具有路由功能的组件。

以下是一个简单的 React 路由项目实践示例代码，该项目包括了基本的路由管理和组件的渲染：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';

function App() {
  return (
    <Router>
      <div className="App">
        <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="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/404">
            <NotFound />
          </Route>
          <Redirect to="/404" />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

在这个示例代码中，<Router> 组件用于包裹整个应用，<Link> 组件用于生成链接，<Switch> 组件用于匹配路由，并只渲染第一个匹配的路由组件，<Route> 组件用于定义路由和组件的映射关系，<Redirect> 组件用于重定向到 404 页面。

这个示例代码只包含了基本的路由功能，如果需要更加复杂的路由功能，可以使用 React Router 提供的更多高级功能和 API。