リンク：パラメータ

Question

私はルートパラメーター<Link to=を使用して:name

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

、インデックスからのリンクが正しくルート/about/vinnieを例えばすると、ルータの設定を反応させてきました。

ただし、<Link to=コンポーネントが[バージョン情報]ページにある場合、リンクをクリックするだけでブラウザのURLが更新されますが、正しいページが再描画されません。

これはなぜ起こっているのか？

About.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> 
    ); 

}。

CustomerInfo.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() { 
... 

Answer 1

私はあなたの最初の<Route />にexact小道具を追加する必要があると思います。さもなければあなたのルートはIndexとAboutと一致し、私はリアクションルータが意図的に両方をレンダリングすると思います。