Реактивная реализация маршрутизации

Question

Я пытаюсь реализовать маршрутизацию в своем приложении реакции.Итак, у меня есть компонент с переходом на другие компоненты:

  class Order extends Component {

        render() {

            return (
                <div>
                     <ul>
                       <li>
                         <Link to="/stepOne/">1</Link>
                        </li>
                       <li>
                        <Link to="/stepTwo/">2</Link>
                       </li>
                          <Link to="/stepThree/">3</Link>
                        <li>
                           <Link to="/steFour/">4</Link>
                        </li>
                     </ul>

                    <Switch>
                        <Route exact path="/stepOne" component={SearchConcoctionFormula} />
                        <Route exact path="/stepTwo" component={OrderStepTwoIndex} />
                        <Route exact path="/stepThree" component={OrderStepThreeIndex} />
                        <Route exact path="/stepFour" component={OrderStepFourIndex} />
                    </Switch>
                </div>);
        }
    }

    export default Order;

Но моя проблема в том, что когда я нажимаю на ссылку, выбранный компонент отображается вместе с навигационными ссылками.Но я ожидаю, что будет отображаться только выбранный компонент.Что я должен изменить?

Answer 1

class Order extends Component {

    render() {

        return (
            <Router>
                <Switch>
                    <Route exact path="/" component= 
                        {Links} />
                   <Route exact path="/stepOne" component= 
                        {SearchConcoctionFormula} />
                    <Route exact path="/stepTwo" component= 
                       {OrderStepTwoIndex} 
                    />
                    <Route exact path="/stepThree" component= 
                        {OrderStepThreeIndex} />
                    <Route exact path="/stepFour" component= 
                      {OrderStepFourIndex} />
                </Switch>
            </Router>);
    }
}

export default Order;

создать новый компонент

class Links extends Component {
 render(){
      <ul>
          <li>
            <Link to="/stepOne/">1</Link>
          </li>
          <li>
          <Link to="/stepTwo/">2</Link>
          </li>
          <Link to="/stepThree/">3</Link>
          <li>
          <Link to="/steFour/">4</Link>
          </li>
         </ul>
   }
}
export default Links

что-то вроде этого, также Wrap with Router