reactjs - 通过 React-Router v4 传递值 <Link/>

标签 reactjs hyperlink react-router

问题:如何通过 React-Router 的 Link 组件传递一个 prop 或单个值(例如 _id),并在端点捕获它?

这就是我的意思:假设我们正在页面/a。该链接将把用户带到/b。因此<Link to='/b'> 。现在,我需要通过链接传递一个 _id,从/a 到/b。

<Link to='/b' params={_id}>blah blah</Link>

我尝试传递的 id 是嵌套 Link 组件的对象的属性。

我发现这个语法params={}在另一个 StackOverflow 线程中。我的代码编译后没有中断,所以这可能意味着它有效?但是,我不确定如何在端点检索此传递的值。

任何帮助将不胜感激。

最佳答案

传递 Prop

您可以通过 state 对象将任意 props 传递给路由:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

然后您可以从组件内访问 state 对象:

const {foo} = props.location.state

console.log(foo) // "bar"

传递参数

配置您的路由路径以接受命名参数(:id):

<Route path='/route/:id' exact component={MyComponent} />

然后您可以将链接中的 ID 等 URL 参数传递到:

<Link to={`route/foo`}>My route</Link>

您可以通过 match 对象访问组件内的参数:

const {id} = props.match.params

console.log(id) // "foo"

来源

关于reactjs - 通过 React-Router v4 传递值 <Link/>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45598854/

相关文章:

javascript - 如何在 React JS 中获取最后访问的路线/状态?

reactjs - React js中不记名 token 的空间问题

javascript - npm run build 因 create-react-app 而失败

reactjs - 如何在 React Router 和 outlet 中不使用高阶函数的情况下在两个组件之间共享数据

node.js - 如何在使用 Passport(react、react-router、express、passport)进行社交身份验证后重定向到正确的客户端路由

javascript - 无法在 useEffect 中模拟函数

html - 基本标签无法正常工作

html - 放置一些图片后无法点击我的链接

knockout.js - KnockoutJS 中的 Href 和 mailto 链接

javascript - 使用 react-router 以编程方式导航