Question

我在reactjs应用程序中使用react路由器。我有一个为主页定义的路线。在这条路线上，我有两条儿童路线。看起来像这样

<Route path='/' component={App}>
   <Route path='/login' component={LoginPage} />
   <Route path='/app' onEnter={hasAuth}>
      <IndexRoute component={NewHome}>
         <IndexRoute component={Reviews} />
         <Route path='/search' component={Search} />
      </IndexRoute>
   </Route>
</Route>

这是我的家庭组件

class NewHomePage extends Component {
    render() {
        return (
            <div className={c.container}>
                <div className="page-content-wrapper full-height">
                    {/*<!-- START PAGE CONTENT -->*/}
                    <div className="content full-height">
                        <div className="container-fluid container-fluid-media full-height no-padding">
                            <div className="row full-height no-margin">
                                <NewSidebar/>
                                {this.props.children}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

我想要什么我想将评论呈现为默认组件。但是，当我点击我的个人资料照片（在标题中）时，我希望搜索组件取代评论。目前甚至索引路线Riviews也没有显示

我怎样才能做到这一点？

Answer 1

您可以使用Switch。

对于个人资料，请点击定义Link或NavLink。

<Link to="/profile">Profile</Link>

路由器：

<Switch>
          <Route exact path='/' component={Reviews}></Route>
          <Route path='/profile' component={Search}></Route>
</Switch>

Answer 2

要实现您的目标，您必须对以下路线稍作修改：

 returnUserDetails(){
    var userData;
    this.storage.get('userData').then((val) => {
         userData = JSON.parse(val);  
     });

   return userData; 
 }

然后在<Route path='/' component={App}> <Route path='/login' component={LoginPage} /> <Route path='/app' onEnter={hasAuth} component={NewHome}> <IndexRoute component={Reviews} /> <Route path='/search' component={Search} /> </Route> </Route>组件中，如果它是功能/无状态组件，则使用NewHome;如果它是有状态组件，则使用{props.children}。

以下是功能组件的示例： import来自＆＃39; react＆＃39;;

的反应

{this.props.children}

对于有状态组件，它看起来像这样：

const NewHome = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

export default NewHome;

渲染路线的特定子项

2 个答案: