什么是反应中的路由器 - Javascript

在React中，路由器是一个很常见的概念，它可以使应用程序根据URL的不同部分显示不同的内容。React Router是React官方提供的路由器库，它可以让我们轻松地构建单页应用。

React Router基本用法

首先，我们需要在项目中安装React Router：

npm install react-router-dom

然后，在项目中引入React Router：

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

Router组件是React Router提供的最外层组件，它包裹着整个应用程序，并负责监听URL的变化。Route组件用于匹配URL，当URL和Route组件的path属性匹配时，React Router会渲染这个Route组件。Switch组件用于包裹多个Route组件，它只会渲染第一个匹配的Route组件。

下面是一个基本的React Router应用程序：

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
        <Route component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

上面的代码中，我们定义了三个Route组件分别对应"/"、"/profile"和所有其它路径。exact关键字表示这个Route组件只会匹配"/"，而不会匹配"/profile"。当URL没有匹配任何Route组件时，我们会渲染NotFound组件。

Route组件

Route组件是React Router最重要的组件之一。除了基本的path和component属性以外，Route组件还有很多其他属性可以配置。下面是一些常见的属性：

• path：匹配URL的路径。
• exact：只有当URL精确匹配path时才会匹配此路由。
• component：匹配成功后渲染的组件。
• render：匹配成功后渲染的函数。
• children：无论URL是否匹配，都会渲染子组件。

下面是一个Route组件的例子：

<Route exact path="/" component={Home} />

这个Route组件匹配精确匹配"/"路径，并在匹配成功后渲染Home组件。

Link组件

Link组件是React Router提供的用于导航的组件。它会生成一个带有href属性的a标签，当用户点击这个链接时，React Router会阻止浏览器默认行为，并在不刷新页面的情况下切换到新页面。

下面是一个Link组件的例子：

import { Link } from 'react-router-dom';

<Link to="/">Home</Link>

这个Link组件生成一个链接到"/"路径，并显示"Home"文本。

总结

React Router是React应用程序中使用的常见的路由器库，它可以使我们的应用程序根据URL的不同部分显示不同的内容。Route组件是React Router的核心组件之一，它用于匹配URL并渲染相应的组件。Link组件是React Router提供的用于导航的组件，它可以生成可点击的链接以切换页面。