小编jhj*_*cki的帖子

我设置了一个包含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 = () …