导航到Reactjs onClick事件

Question

在制作我的应用时，我遇到了问题。

假设我有一个像这样的单页应用

回家联系我们

现在，如果我点击任何组件，它将导航到我点击的选项卡对应的新组件，我可以通过我已经完成的反应路由器实现它

现在进入我的场景

以下是我的应用

的屏幕截图

• 现在我想点击更多关于涂鸦然后应该 导航到其他组件，然后单击后退按钮 回到主页。 我的应用程序有这样的结构

  App class

  {
  
  render{
  
  return(
  
  <Header />
  <OccasionList />
  );
  }
  

  }

现在屏幕截图中显示的页面有导航栏作为标题组件 页面的其余部分是OccasionList组件。

我的问题

• 我想从OccasionList导航到其他一些js页面或 在click事件上显示事件描述的组件 并且只有该组件应该在整个屏幕中可见（与单页应用程序相似）

我认为反应路由器在这种情况下无效。

那我该怎么办呢？

更新 为什么我认为路由器不能实现这个

说这是app的入口点，routr将我的所有请求重定向到App组件

ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}> 
<Route path="header" name="archives" component={Header}></Route>
<Route path="occasion" component={OccasionList}></Route>
</Route>
</Router>,
document.getElementById('app'));

现在它将控制重定向到App组件。现在我怀疑是

常用方法

class App extends React.Component {


   render() {


       return (   
         <div>
        {this.props.children}
         <Link to="header">header</Link>
         <Link to="occasons">occasons</Link>
           </div>
      );
   }
}

依此类推到不同的组件控件将导航到不同的页面。

但我怀疑是 根据我的应用程序

class App extends React.Component {


   render() {


       return (   
         <div>

        {this.props.children}
         <Header>
         <OccasionList>

           </div>
      );
   }
}

现在更多关于涂鸦根据图像出现在occasionList组件中。所以基本上我需要做定义链接

关于涂鸦的更多信息

在子组件内，而不是 App 组件。

所以主要的关键是

• 链接基本上有助于导航到子组件，并在父组件
中定义
• 在我的情况下，我的父组件呈现一个子组件，而子组件又会提供一个链接，该链接将导航到一个新组件。

路由器如何实现此功能？