react实现点击导航部分页面跳转（路由）

我们要实现的效果就是点击季度/半年/年度地下div跳转不同的子组件，但是网上对于这种的路由跳转非常少


大约的效果就是上述图拉
放上部分代码
首先引入：

import {
      HashRouter, Switch, NavLink, Route, Redirect } from 'react-router-dom';
import quar from '../../components/Presentation/quarterlyReport';
import half from '../../components/Presentation/halfYearlyReport';
import year from '../../components/Presentation/yearReport';

除了路由记得把子组件也要引入！

 <ul>
                <li onClick={
     ()=>this.changePresentation('quarter')} ref='li1'>
                <NavLink to="/quar" > 季度报告</NavLink>
                  </li>
                <span >|</span>
                <li  onClick={
     ()=>this.changePresentation('halfYear')} ref='li2'>
                <NavLink to="/half">半年报告</NavLink>
                  </li>
                <span>|</span>
                <li  onClick={
     ()=>this.changePresentation('year')} ref='li3'>
                <NavLink to="/year">年度报告</NavLink>
                  </li>
              </ul>

  {
     /* 中间图片 */}
          <div className="presentationContent">
          <Switch>
              <Redirect exact from="/" to="/quar"></Redirect>
              <Route path='/quar' component={
     quar} />
              <Route path='/half' component={
     half} />
              {
     /* 动态路由 */}
              <Route path='/year' component={
     year} />
            </Switch>
             
          </div>

然后最后在最外层的div内部套一个

中间是全部代码
就可以实现了，存着以后忘记了使用