反应路由器活动链接 CSS - JavaScript

React Router是React的官方路由器，它允许我们构建单页应用程序（SPA）和多页应用程序（MPA）并通过URL进行导航。React Router可以与React一起使用，以提高性能和用户体验。本文将介绍反应路由器和如何在其上使用CSS和JavaScript。

安装

在使用React Router之前，我们需要安装它。您可以使用npm或yarn：

npm install react-router-dom

或者

yarn add react-router-dom

路由器组件

React Router的主要组件是BrowserRouter，它是浏览器用于处理URL历史记录的组件。您需要在React应用程序的根组件中使用BrowserRouter。

以下是一个简单的例子：

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";

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

export default App;

在上面的代码中，我们创建了一个BrowserRouter，它使用两个Route组件。每个Route组件都有一个path属性指定它应该在哪个URL下呈现，以及component属性指定组件。

激活链接

通过React Router，您可以使用Link组件来创建一个链接，该链接在用户单击时可以导航到其他路径。例如，我们可以在导航菜单中创建链接：

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

在上面的代码中，我们在每个li元素中包装了Link组件，并在其to属性中指定每个链接的路径。React Router会自动处理单击事件并将浏览器历史记录更新到所需的URL。

匹配链接

除了可以激活链接之外，Link组件还可以添加类名，这使我们可以根据当前URL匹配某些链接。例如，我们可以使用NavLink组件在当前路径匹配时添加类名：

import React from "react";
import { NavLink } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink exact to="/" activeClassName="active">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink exact to="/about" activeClassName="active">
            About
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

在上面的代码中，我们使用NavLink组件代替Link组件，并将activeClassName属性设置为“active”。当当前URL匹配to属性时，activeClassName类将添加到组件。

使用样式

我们可以在React应用程序中使用CSS样式来美化我们的组件，反应路由器不例外。例如，我们可以创建一个名为“active”的CSS类来添加样式：

.active {
  font-weight: bold;
  color: red;
}

在上面的CSS中，我们将字体加粗和颜色更改为红色。

使用脚本

React Router允许我们使用JavaScript来控制应用程序。例如，当用户进入某个路径时，我们可以在控制台中打印一条消息：

import React, { useEffect } from "react";
import { useLocation } from "react-router-dom";

function App() {
  const location = useLocation();

  useEffect(() => {
    console.log(`User navigated to ${location.pathname}`);
  }, [location]);

  // ...
}

在上面的代码中，我们使用useLocation hook获取当前路径，然后使用useEffect hook创建一个副作用，在路径更改时运行它。在控制台中打印消息。

结论

React Router是构建单页应用程序和多页应用程序的最佳工具之一。您可以使用Link和NavLink组件来创建链接，并使用CSS和JavaScript来控制您的应用程序。在使用React Router时，记得使用BrowserRouter包装您的整个应用程序，这比其他路由器更简单且易于使用。