React-Router 实现探索之旅

2024-01-17 17:52:47

前端路由的魅力

前端路由是一种将不同页面或视图映射到不同 URL 的技术，它可以在不刷新整个页面的情况下切换视图。这使得 Web 应用更具响应性和交互性。

实现简易版 React-Router

1. 安装依赖

npm install react-router-dom

2. 配置路由

import { BrowserRouter, Route, Link } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
};

在 App 组件中，我们使用了 BrowserRouter 来包装所有的路由配置。BrowserRouter 是一个 React 组件，它会在客户端创建一个 history 对象，用于管理浏览器的历史记录。Route 组件用于定义路由规则，当 URL 匹配到某个 Route 的 path 时，对应的组件就会被渲染。

3. 理解 BrowserRouter

BrowserRouter 的主要作用是创建一个 history 对象。这个 history 对象可以用来获取当前的 URL、监听 URL 的变化、以及修改 URL。在 React-Router 中，所有与路由相关的方法都依赖于 history 对象。例如，Link 组件使用 history.push() 方法来更新 URL，而 Route 组件使用 history.location 来获取当前的 URL。

4. 传递路由信息给子组件

在子组件中，我们可以通过 props 来获取路由信息。例如，在 About 组件中，我们可以使用 props.match 来获取当前的匹配信息，包括 URL、参数等。

const About = (props) => {
  return (
    <div>
      <h1>About Page</h1>
      <p>URL: {props.match.url}</p>
      <p>Params: {JSON.stringify(props.match.params)}</p>
    </div>
  );
};