react中的Navlink怎么实现路由高亮

在 React 中使用 NavLink 组件可以实现路由高亮，具体实现步骤如下：

1. 安装 react-router-dom 包，该包提供了 NavLink 组件。

npm install react-router-dom

2. 在组件中导入 NavLink 组件。

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

3. 在组件的 render 方法中使用 NavLink 组件，并设置 activeClassName 属性为路由高亮时要添加的 class 名称。

render() {
  return (
    <div>
      <NavLink to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
    </div>
  );
}

4. 在 CSS 中定义路由高亮时要添加的 class 样式。

.active {
  font-weight: bold;
}

这样，当用户点击 NavLink 组件时，会自动添加 active 类名，从而实现路由高亮。

相关问题

react中怎么实现路由懒加载

在React中实现路由懒加载可以通过使用React Router的`React.lazy`和`React.Suspense`来实现。

首先，我们需要使用`React.lazy`来动态导入我们的路由组件。例如，我们可以这样做:

import React from 'react';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));

上面的代码中，`React.lazy`函数接受一个返回`import()`函数的函数作为参数。这将返回一个`Promise`，`React.lazy`将在组件需要渲染时自动解析这个`Promise`，并渲染对应的组件。

然后，我们可以在我们的路由中使用`React.Suspense`来等待所有的懒加载组件加载完成。例如:

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

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

在上面的代码中，`<Suspense>`组件使用`fallback`属性指定在懒加载组件加载完成之前显示的组件。在本例中，我们显示一个简单的"Loading..."文本。

这样，当我们访问到相应的路由时，对应的懒加载组件将会被自动加载并渲染出来。

总结起来，要在React中实现路由懒加载，我们需要使用`React.lazy`来动态导入懒加载组件，并使用`React.Suspense`来等待所有的懒加载组件加载完成时显示相应的内容。

react路由中的link和navlink

在 React 路由中，`Link` 和 `NavLink` 是用来创建导航链接的组件。

`Link` 组件用于创建基本的导航链接，它会生成一个 HTML `<a>` 标签，当用户点击链接时，React 路由会根据配置的路径进行导航。

使用 `Link` 组件的语法如下：

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

<Link to="/about">About</Link>

上述代码会生成一个指向 "/about" 路径的导航链接。点击链接时，React 路由会渲染与 "/about" 路径相匹配的组件。

`NavLink` 组件是 `Link` 的扩展版本，它可以为当前活动的导航链接添加样式。当与当前路径匹配时，`NavLink` 会自动添加一个指定的 CSS 类名（默认为 "active"），通过这个类名，我们可以为活动链接添加自定义样式。

使用 `NavLink` 组件的语法如下：

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

<NavLink to="/about" activeClassName="active">About</NavLink>

上述代码会生成一个指向 "/about" 路径的导航链接，并且当与当前路径匹配时，会自动添加 "active" 类名。我们可以利用这个类名来定义活动链接的样式。

总的来说，`Link` 和 `NavLink` 组件都是用来创建导航链接的，它们之间的主要区别是 `NavLink` 可以为当前活动的链接添加样式。使用它们可以方便地实现在 React 应用中进行页面导航。