React中组件的导航方式

最新推荐文章于 2025-06-10 12:01:49 发布

原创最新推荐文章于 2025-06-10 12:01:49 发布 · 725 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #reactjs #javascript

React 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了React Router中的声明式导航组件Link和NavLink的使用方法，并对比了它们之间的区别。同时，还探讨了编程式导航的实现方式及其应用场景。

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

一、声明式导航（主要利用a标签进行页面跳转）

（一）Link

为你的应用提供声明式，无障碍导航，默认解析成a标签

to(String): 点击跳转到指定路径

  <Link to="/home" />
  
	例子：
	(item.path = '/home')
	<li key={item.name}>
	         <Link to={item.path}>{item.title}</Link>
	</li>)

to(Object):携带参数跳转到指定路径（同Redirect）

跳转时携带详细信息（比如这是个支付跳转，需要把商品的价格等信息传递过去）

	<Link to={{
	     pathname: '/pay',
	     search: '?id=123456',
	     state: { price: 998 }
	   }} />

(二)NavLink

跟Link的区别是可以让选中的元素高亮，字体颜色、大小等

方式一、 activeClassName：通过新建css文件来设置active的style属性
<li key={item.name}>
     <NavLink    activeClassName="active"   to={item.path}>{item.title}</NavLink>
</li>)

方式二、activeStyle：直接在当前元素进行行内style属性的设置
<li key={item.name}>
     <NavLink    activeStyle={{color:'red'}} to={item.path}>{item.title}</NavLink>
</li>)

二、编程式导航：利用js来实现页面跳转

跳转方式：

1、history.replace()

2、history.push()：

跳转本质：history.push(‘路径’)

如何获取history,location,match?

(1)Route渲染

当前组件是通过Route渲染的，则history会通过props传入组件
函数组件：第一个参数就是props

例子：
let Mine = function(props){
    return (
        <div>
            Mine
            <button onClick={()=>{
                props.history.push('/home')
            }}>回到首页</button>
        </div>
    )
}

(2)通过高阶组件HOC（HIgh Order Component）获取
（其实是一个包装函数，而不是组件）

（函数组件）通过高阶组件获取props：

**import { withRouter } from 'react-router-dom'; **
let App = (props) => { }
**App = withRouter(App);**
export default App;