Question

我设置了一个包含3页的应用程序，Home，Reptiles和Map。

我的问题出现在爬行动物和地图页面上。在爬行动物页面上，我显示了一个物种列表，每个物种都有一个范围国家列表和一个链接“请参见此处的地图”。当用户点击某个国家/地区时，我希望显示“地图”页面，并突出显示所选国家/地区（我还没有实现，所以，现在，我只想将该国家/地区传递到地图页面）。

当用户点击某个物种的“查看地图”时，我希望显示该地图页面，并突出显示该物种的所有范围国家/地区。现在我可以在路由器中传递爬行动物和乡村道具反应路由器，但是当我尝试直接在Reptlie.js文件中传递链接中的道具时，我收到错误警告：未知道具{{1}在标签上。

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

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

以下是我的结构：

以下是一些图片：

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

reptile

App.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;

Reptiles.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;

Map.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;

Answer 1

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

then()

在Reptile.jsx中，传递所选参数，例如来自props.country或来自您存储的任何地方的参数。确保在不适用时在链接中传递一些默认值。例如，对于第一个链接中的国家/地区，我已经通过了所有国家/地区。您可以根据您的要求通过。您可以将参数传递为：

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

并通过Map.jsx <NavLink to={`map/${reptile.id}`}> <NavLink to={`map/${country}/${reptile.id`}>

中的上下文访问这些参数

有关参数的更多信息

与您的情况类似，参数爬行动物ID必须在两种情况下都必须，并且仅在单击特定国家/地区时才需要国家/地区。因此，您可以将参数国家/地区设为可选，并且必须使用爬行动物ID您可以关注this

this.props.params.reptileId

然后相应地传递。

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

Answer 2

您有三种选择：

将参数放在网址中。这是迄今为止最好的默认值。例如你可能有网址/map/beardy或/map?name=beardy 然后，您可以使用props.params.whatever在地图中访问这些内容，或者解析props.location.search（例如，从npm使用qs）。
Use browserHistory.push＆＃39; state参数添加了一个隐藏的部分数据到历史框架。这样可以保留刷新页面的功能，或者在保留数据的同时在历史记录中前后移动。缺点是我无法向其他人发送链接并将其加载到选择中。
使用redux或类似方法将数据存储在内存中。页面刷新时数据将丢失。这非常糟糕。

Answer 3

您的第一个问题：“如何将道具直接传递到组件中的链接？” 。不能，您确实有一些变通办法，例如其他答案中提到的变通办法，例如创建一个包含一些数据的URL，然后在加载组件时从该URL中检索它。但是您不能通过或传递自定义道具。

但是，您可以像在 router.js 中一样传递自定义道具，除了代替

这来自您的 router.js

themes/[theme-name]/assets/images

您可以通过这样的道具：

<img src="{{ 'assets/images/your-image.jpg'|theme }}" alt="My Image" />

关于您的第二个问题：“您将如何生成动态网址？”

假设您要像这样渲染组件：

<Route path="reptiles" name="reptiles" component={Reptiles}/>

然后在Reptile.js中，您可以创建动态网址，如下所示：

<Route path="/reptiles" render={() => <Reptiles name="reptiles" />} />

React-Router：使用链接

3 个答案: