链接=不带/路由工作：参数

问题描述：

我有反应路由器设置与路由参数:name链接=不带/路由工作：参数

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

使用<Link to=，从指数的链接正确地路由到例如/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() { 
...

你可以分享'About'组件吗？ – QoP

@QoP我在示例中添加了更多细节。难道是因为我使用'componentWillReceiveProps'来更新CustomerInfo状态？ –

答

我认为你需要的道具exact添加到您的第一个<Route />。否则，你的路线匹配指数和关于，我认为反应路由器有意地呈现两者。

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

链接=不带/路由工作：参数

相关推荐