浅谈Router和Route-Toy模板网

这篇具有很好参考价值的文章主要介绍了浅谈Router和Route。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

router 和 route 是在前端框架中用于管理和处理路由的两个关键概念。这两者之间的关系可以通过具体的代码来解释。在本示例中，我将使用 React 和 React Router 来说明它们之间的关系。

Router（路由器）：Router 是一个库或框架，用于在应用程序中处理路由。在 React 中，最常用的是 react-router-dom 库，它提供了 BrowserRouter 和 HashRouter 等不同的路由器组件。
Route（路由）：Route 是路由器中的一部分，用于定义路由规则。每个 Route 组件都有一个 path 属性，表示匹配的 URL 路径，以及一个 component 属性，表示在匹配该路径时要渲染的组件。

下面是一个使用 React 和 React Router 的示例代码，演示了 router 和 route 的关系：

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

// 定义两个组件
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

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

export default App;

在这个示例中：