Question

我有一个文件route.js，其中有

import React from 'react'
import { render } from 'react-dom'
import {HashRouter ,Route,Link} from 'react-router-dom'

const Router = (props) => (
  <HashRouter>
    <div>
      <Route exact path="/" render={() => <list data={props.data}/>}/>
      <Route path="/list" render={() => <Table data={props.data}/>}/>
    </div>
  </HashRouter>

这是编辑页面代码 -

import React, { Component} from 'react'

export default class Edit extends Component {
  render() {

    return (
      <div>
    <center>{this.props.data}</center>
      </div>
    );
  }
  }

我想将列表数据传递到下一页。我可以将道具传递给路由器页面

Answer 1

如果你想将任何道具传递到某条路线，你可以将它传递给params的{{1}}道具。

在您的情况下，您可以在FreindList页面的任何位置设置一个按钮，如：

Link

此外，您可以在编辑页面aswel中访问此数组。

不要忘记从反应路由器

导入链接

由于你使用的是反应路由器4的<Link to='edit' params={{data: props.data.name}}> <button>Edit</button> </Link>，你可以使用这样的东西：

react-router-dom

您将在编辑组件的<Link to={{ pathname: '/edit', state: { data: props.data.name } }}> <button>Edit</button> </Link>中获取它。

有关反应路由器4的更多文档，请检查this

如何将道具传递给路由器？

1 个答案: