[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

最新推荐文章于 2025-08-22 13:39:56 发布

weixin_30339969

最新推荐文章于 2025-08-22 13:39:56 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6577579.html

本文介绍了如何在 React 应用中使用 React Router 进行页面间的导航。通过 Link 组件，可以实现不同路由间的跳转，并详细解释了常规跳转与使用 'replace' 属性进行历史状态替换的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen.

Import Link:

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

Add Nav section to the page

const Nav = () => (
  <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link replace to={{pathname: '/contact'}}>Contact</Link>
  </nav>
);

There are two ways to nav to another page.

1. to="/about"

2. to={{pathname: '/contact'}}

Here the 'replace' keyword able to help modify pushHistory. Once you use 'replace' it will replace previous state to current state, instead of add one state.

For example.

Current history: ['/', '/about', '/contact'], in the normal case, you hit the 'Back' button in your browser it will bring you back to '/about'.

But once you use 'replace', it will replace ['/', '/about'] to ['/', '/contact']. So you when hit 'Back' button , you will back to '/'.

转载于:https://www.cnblogs.com/Answer1215/p/6577579.html