使用时反应路由器通行道具[复制]
当用户单击单击区域时，我试图传递所选帐户的ID。
<Link to="/account" id={1234}>
然而，在我的帐户组件中，这将使我们：
<Route path="/account" component={Account}/>
我越来越不确定了。
export default class Account extends Component {
constructor(props) {
super(props);
alert(props.id);
有没有办法使用链接将道具传递到我的组件？
共有3个答案
链接将信息传递给路由的一个简单方法是在URL中使用一个参数：
// 1. Link to what would be the URL for a specific account.
// would probably replace `1234` for a variable here
<Link to={`/account/${1234}`>View Account 1234</Link>
// 2. "capture" the ID in the url using a param matcher
// We'll receive this param as "props.match.params.id" in the render function
// using component={} also works here, and the props will be injected directly into the component instead,
// but render={} here looks cleaner to me, and is more flexible if you wanna pass more props
<Route path="/account/:id" render={props => <Account id={props.match.params.id} />} />
有关渲染道具如何工作的更多信息，请参阅文档。
把道具传给孩子们你可以这样做
<Route
path="/new/path"
render={(routeProps) => (
<MyComponent {...routeProps} {...props} />
)}
/>
不要跳过排列运算符。
我认为最好的方法是将您的帐户id定义为路由中的参数，例如。
<Route path="/account/:id" component={Account}/>
<Link to='/accounts/123'> Go to Accounts</Link>
并用props.match.params.id访问它，但是如果你想通过道具发送，你可以这样做：
<Link to={{ pathname: '/account', state: { id: '123'} }}>Go to Accounts</Link>
此外:
const { id } = props.location.state
-
我是React Router的新手，我正试图通过一条路径将一些道具从我的父组件传递给子组件。 这是我的代码： 理想情况下，我希望能够从子组件触发。在做了一些研究后，我认为传递一个选项而不是会传递它，但是它不会。知道如何将函数传递到路由组件中吗？
-
我对这个问题很疯狂... 首先，我对React还是新手，其次，在发布之前，我尝试过：在React router v4中将自定义道具传递给路由器组件，React子组件不接收道具 但是运气不好... 我试图实现的是简单地将路由添加到现有的React项目中。 例如，顶级（父级）类如下所示： 注意：错误位于属性“getProfiles”在类型“Readonly”上不存在 儿童班： } 所以我不知道如何传递
-
我想将我的应用程序入口点用作全局状态存储。将信息作为道具传递给孩子们。 使用react-router 4，如何将prop数据发送到渲染的组件。以类似的方式： 我见过一些旧版本react router的简陋变通方法，这些方法似乎已被弃用。 在v4中这样做的正确方法是什么？
-
我需要通过使用路由器的组件道具。这是我的代码： 如您所见，我验证了我要传递给登录组件的道具。 当我记录道具时，未经验证的道具不存在。我做错了什么？我怎样才能正确地通过道具？我跟踪了文档和其他讨论。据我所知，这应该是可行的。react router和react router dom的版本为4.0.0
-
注意：如果我像其他属性一样添加appState；提交组件中没有appState之类的属性， 如果我用这个； appState传递很好，但这次缺少历史对象，正确的方法是什么？appState只是mobx类实例。 编辑：我找到了一个“奇怪”的解决方案。我将route元素更改为此； 然后，我可以通过访问相同的历史对象在进行此更改之前，我可以将其用作 如果我让它工作正常，但是用这种方式获取这个历史对象很烦
-
当我在浏览器上运行我的应用程序时，我的控制台中出现以下错误。 警告：失败的propType:为“Route”提供的prop“component”无效。 我目前正在使用以下开发需求的版本 这就是我的路由文件的外观。 这就是我的主js的样子 请问这个错误是从哪里来的？我该如何解决这个问题？