React在页面加载后添加路由

基础概念

React 是一个用于构建用户界面的 JavaScript 库，而 React Router 是一个用于在 React 应用程序中实现客户端路由的库。React Router 允许你在不同的 URL 下显示不同的组件，从而实现单页应用（SPA）。

类型

React Router 主要有三种类型：

HashRouter：使用 URL 的 hash 部分来模拟一个完整的 URL，从而实现路由功能。
BrowserRouter：使用 HTML5 历史 API 来保持 UI 和 URL 同步。
MemoryRouter：将路由信息保存在内存中，适用于服务器渲染或非浏览器环境。

应用场景

React Router 适用于需要在客户端进行页面导航和状态管理的单页应用（SPA），例如：

管理后台系统
电子商务网站
社交媒体平台

示例代码

以下是一个简单的示例，展示如何在页面加载后使用 React Router 添加路由：

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

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

const 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 path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

常见问题及解决方法

问题：页面加载后路由没有正确显示

原因：

路由配置错误：可能是路径或组件配置错误。
路由组件未正确导入：可能是路由组件未正确导入或导出。
路由包裹错误：可能是 Router 组件未正确包裹应用。

解决方法：

检查路由配置是否正确，确保路径和组件匹配。
确保所有路由组件都已正确导入和导出。
确保 Router 组件正确包裹整个应用。

例如，检查以下代码：

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

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

export default App;

确保 Home、About 和 Contact 组件已正确导入和导出。