如何使用react路由器实现分步导航(就像在幻灯片中一样)？

Question

我目前正在运行以下代码：

​

​

但我想要实现的是：

​

​

这是我的代码：

            <Link to={'/assessment/01'} className="dropdown-item">Assessment 1</Link>
            <Link to={'/assessment/02'} className="dropdown-item">Assessment 2</Link>
            <Link to={'/assessment/03'} className="dropdown-item">Assessment 3</Link>
          </nav> <br/>

          <Switch>
              <Route exact path='/create' component={ Create } />
              <Route path='/edit/:id' component={ Edit } />
              <Route path='/index' component={ Index } />
              <Route path='/assessment/01' component={ Assessment_01 } />
              <Route path='/assessment/02' component={ Assessment_02 } />
              <Route path='/assessment/03' component={ Assessment_03 } />
          </Switch>

如何像第二个示例那样路由？

Answer 1

您必须根据当前路由有条件地呈现链接。

例如。

 render(){
 <div>
  <h1>Welcome to assessment</h1>
   {props.location.pathname === '/assessment/01' && <Link to='/assessment/02' className="dropdown-item">Assessment 2</Link>}
   {props.location.pathname === '/assessment/02' && <Link to='/assessment/03' className="dropdown-item">Assessment 3</Link>}
   {props.location.pathname === '/assessment/03' && <Link to='/assessment/01' className="dropdown-item">Assessment 3</Link>}
 </div>
 }

就像这样。希望这能对你有所帮助。

编辑:查看fiddle here和demo