react_tutorial/react_router

React Router 是 React 应用程序中用于处理客户端路由的库。它允许你定义路由和组件，并根据用户的 URL 访问渲染相应的组件。

安装 React Router

首先，你需要安装 React Router。可以通过以下命令来完成：

npm install react-router-dom

基本用法

React Router 主要由三个组件组成：<Router>, <Route>, 和 <Switch>。

• <Router> 是整个路由系统的入口点。
• <Route> 用于定义路由规则。
• <Switch> 用于渲染匹配 <Route> 的组件。

以下是一个简单的例子：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

export default App;

高级用法

React Router 还提供了许多高级功能，例如：

• 动态路由参数
• 嵌套路由
• 导航守卫
• 路由链接

更多高级用法，请参考React Router 官方文档。

React Router Diagram