React中的路由react-router

Posted 2023-05-17

参考技术A

react-router最主要的API是给我们提供的一些组件：

<NavLink>是<Link>的特定版本，会在匹配上当前的url的时候 给已渲染的元素添加参数

比如，若想实现一个普通组件（button按钮）点击进行路由的跳转的时候，要满足两个条件：

src/App.js文件

src/index.js文件

传递参数有三种方式：

动态路由的概念--指的是路由中的路径不是固定的：

src/router/index.js文件

src/App.js文件

React 和 React-Router：通过函数调用进行路由，参数传递到路由中，而不是单击 <Link>

【中文标题】React 和 React-Router：通过函数调用进行路由，参数传递到路由中，而不是单击 <Link>

【英文标题】：React and React-Router: Routing through function call with params passed into the route instead of clicking <Link>

【发布时间】：2018-04-22 15:36:27

【问题描述】：

如何通过 react-router 中的函数调用传递参数进行路由？

例如，我有这个链接，当点击路由到带有传入参数的不同网址时：

<Link key=category.name to=`/category/$category.name` params=category: category.name >category.name</Link>

假设我想通过一个函数调用来模拟点击上述链接时会发生什么，该怎么做呢？

clickHandler()
//What function should be called to do the routing through a function call?

【问题讨论】：

React-router: How to manually invoke Link?的可能重复

【参考方案1】：

使用history 对象。

如果渲染Link 的组件是由路由器渲染的，那么您在this.props 中有一个可以使用的history 属性。

clickHandler()
    const 
        history
        category // ??
     = this.props
    history.push(`/category/$category.name`);