链接到 = 不适用于 /route:parameters答案

【问题标题】：Link to= not working with /route:parameters链接到 = 不适用于 /route:parameters
【发布时间】：2017-04-21 21:15:26
【问题描述】：

我已经用路由参数:name响应路由器设置

  <Router>
      <Switch>
        <Route path="/" exact={true} component={Index} />
        <Route path="/about/:name" component={About} />
        <Route component={NotFound} />
      </Switch>
  </Router>

使用<Link to=，来自Index 的链接正确地路由到例如/about/vinnie。

但是，如果 <Link to= 组件位于 About 页面上，则单击该链接只会更新浏览器 URL，但不会重新呈现正确的页面。

任何线索为什么会发生这种情况？

关于.jsx

render () {

    const id = this.props.match.params.name;

    return (
      <div className="Explore">
        <div className="container">

          <Api endpoint={[this._apiEndpoint(id, 'info')]} loadData={true}>
             <CustomerInfo />
          </Api>
...

Api.jsx

 render () {
    let showData = this.props.loadData ? null : <button onClick={() => this._loadButton()}>Show</button>;
    return (
      <span>
        {this.props.children && React.cloneElement(this.props.children, {
          apiData: this.state.rawData
        })}
        {showData}
      </span>
    );

};

客户信息.jsx

class CustomerInfo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      CustomerInfo: {}
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.apiData !== nextProps.apiData) {
      this.setState({CustomerInfo: nextProps.apiData[0]});
    }
  }

  render() {
...

【问题讨论】：

可以分享About组件吗？
@QoP 我在示例中添加了更多细节。难道是因为我使用componentWillReceiveProps 来更新CustomerInfo 状态？

标签： reactjs react-router

【解决方案1】：

我认为您需要将 exact 属性添加到您的第一个 <Route />。否则你的路由匹配 Index 和 About 我认为 react-router 故意渲染两者。

【讨论】：

我确实有准确的标签，这不是问题