使用 React Router Dom 实现路由导航

使用 React Router Dom 实现路由导航

React Router Dom 是 React 应用程序中用于处理路由的常用库，它提供了一系列组件和 API 来管理应用程序的路由。

安装和配置

首先，确保已经安装了 React 和 React Router Dom，可以通过 npm 或 yarn 安装：

npm install react-router-dom@5.3.4

接着，在应用程序的入口文件中，配置 React Router Dom 提供的路由组件和 API，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

创建路由组件

在应用程序中创建多个路由组件，例如 Home、About、News 和 Message 组件，分别用于展示不同的页面内容。这些组件可以通过 React Router Dom 中的 Route 组件来匹配相应的路径。

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Home from './Home';
import About from './About';
import News from './News';
import Message from './Message';

const App = () => {
  return (
    <div>
      <Switch>
        <Route path="/about" component={About} exact />
        <Route path="/home" component={Home} />
        <Redirect to="/about" />
      </Switch>
    </div>
  );
}

export default App;

路由导航

在页面中使用 NavLink 组件来实现路由导航，它可以生成带有链接的导航元素，并在当前路由与指定路径匹配时自动添加活动类名。

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

const Navigation = () => {
  return (
    <div className="navigation">
      <ul>
        <li>
          <NavLink to="/about">About</NavLink>
        </li>
        <li>
          <NavLink to="/home">Home</NavLink>
        </li>
      </ul>
    </div>
  );
}

export default Navigation;

嵌套路由

可以在一个路由组件中嵌套其他路由组件，实现页面内容的嵌套展示。例如，在 Home 组件中嵌套 News 和 Message 组件，分别显示新闻和消息内容。

import React from 'react';
import { Switch, Route, NavLink, Redirect } from 'react-router-dom';
import News from './News';
import Message from './Message';

const Home = () => {
  return (
    <div>
      <h3>I am Component Home</h3>
      <ul className="nav nav-tabs">
        <li className="nav-item">
          <NavLink className="nav-link" to="/home/news">News</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" to="/home/message">Message</NavLink>
        </li>
      </ul>
      <Switch>
        <Route path="/home/news" component={News} />
        <Route path="/home/message" component={Message} />
        <Redirect to="/home/news" />
      </Switch>
    </div>
  );
}

export default Home;

路由匹配

React Router Dom 支持模糊匹配和精准匹配，可以根据需要选择不同的匹配方式。例如，通过 exact 属性可以实现精准匹配，只有当路径完全匹配时才渲染对应的组件。

<Route path="/about" component={About} exact />

总结

使用 React Router Dom 可以轻松实现复杂的路由导航和页面管理。通过配置路由组件、导航链接和嵌套路由，可以构建出结构清晰、功能完善的单页面应用程序。记得在开发过程中注意路由的匹配方式和重定向，以确保用户能够顺利浏览应用程序的各个页面。

参考

• 使用 React Router Dom 实现路由导航
• 完整代码