React-Router：使用链接将道具从一个组件传递到另一个组件

Question

我设置了一个包含3个页面的应用程序，分别是“首页”，“爬行动物”和“地图”。

我的问题来自“爬行动物和地图”页面。在爬行动物页面上，我显示了一个物种列表，每个物种都有一个范围国家列表和一个链接“查看此处的地图”。当用户单击某个国家/地区时，我希望显示突出显示所选国家/地区的地图页面（我尚未实现该功能，因此，现在，我只希望将该国家/地区传递到地图页面）。

当用户单击某个物种的“在此处查看地图”时，我希望显示地图页面，并突出显示该物种的所有范围国家。现在，我可以在react-router的Route中传递爬行动物和国家/地区的道具，但是当我尝试直接在Reptlie.js文件中的链接中传递道具时，出现错误警告：reptile标记上的未知道具。

从元素中删除此道具。有人可以帮我弄清楚如何将props直接传递到组件中的链接吗？另外，您将如何生成动态URL？例如，map / species1或map / country1？

我认为我的问题出在Reptiles.js中。react-router的版本是3.0.2

下面是我的结构：

以下是一些图片：

下面是我的代码：router.js：

const routes = (
  <Router history={browserHistory}>
    <Route component={App}>
        <Route path="/" component={Home}/>
        <Route path="reptiles" name="reptiles" component={Reptiles}/>
        <Route path="map" name="map" component={Map} country="Taiwan" reptile="Beardy"/>
    </Route>
  </Router>
);

export default routes;

App.js：

class App extends Component {
  render() {
    return (
      <div className="container">
        <header>
          <span className="icn-logo"><i className="material-icons">code</i></span>
          <ul className="main-nav">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/reptiles">Reptiles</NavLink></li>
            <li><NavLink to="/map">Map</NavLink></li>
          </ul>       
        </header>
        {this.props.children}

      </div>
    );
  }
}

export default App;

Reptiles.js：

const Reptiles = () => {
  let reptiles = ReptileList.map((reptile) => {
    return (
      <li className="reptile" key={reptile.id} >
        <img className="reptile-img" src={reptile.img_src} />
        <h3>{reptile.name}</h3>
        <h4> Range &nbsp; &nbsp; 
            <span className="seeMap">
                <NavLink to="map" reptile={reptile.id}>  
                See Map Here 
                </NavLink>
            </span>
        </h4> 
            {reptile.range.map(function(country,index) {
                // only add comma if it's not the last one
                return <span key={country}><NavLink to="map" country={country}> {(index < reptile.range.length-1)? country+',' : country} </NavLink></span> 
            })
            }

      </li>
    );
  }); 

  return (
    <div className="main-content">
      <h2>Reptiles</h2>
      <ul className="group">
        {reptiles}    
      </ul>
    </div>
  );
}

export default Reptiles;

Map.js

var Map = React.createClass({

  render: function() {


    return (
        <div>
            <h2>Country passed from props: {this.props.route.country} </h2>
            <h2>Reptile passed from props: {this.props.route.reptile} </h2>
        </div>
    )

    }

});



export default Map;

Answer 1

在route.js中，您可以按以下方式传递参数：

<Route path="map/:countryName/:reptileId" component={Map} name="map" />

在Reptile.jsx中，传递从props.country或从存储状态开始的所选参数。如果不适用，请确保在链接中传递一些默认值。例如，对于第一个链接中的国家/地区，我已全部通过。您可以根据自己的要求通过。您可以将参数传递为：

<NavLink to={`map/${reptile.id}`}>      

<NavLink to={`map/${country}/${reptile.id`}>

并通过Map.jsx中的上下文访问这些参数 this.props.params.reptileId

有关参数的更多信息

就像您的情况一样，在两种情况下都必须包含参数爬行动物ID，并且仅在单击特定国家/地区的情况下才需要国家/地区。因此，您可以将参数country设为可选，而将爬行动物ID设为必填项。你可以按照这个

<Route path="map/:reptileId(/:countryName)" component={Map} name="map" /> 

然后相应地通过。

<NavLink to={`map/${reptile.id}`}>      

<NavLink to={`map/${reptile.id}/${country}`}>