反应路由实施

Question

我正在尝试在我的React应用程序中实现路由。所以我有一个可以导航到另一个组件的组件：

  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

这样的东西，也用路由器包装