反应路由实现答案

【问题标题】：React Routing implementation反应路由实现
【发布时间】：2019-09-09 11:18:48
【问题描述】：

我正在尝试在我的 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;

但我的问题是，当我单击链接时，所选组件与导航链接一起呈现。但我希望只呈现选定的组件。我应该改变什么？

【问题讨论】：

单独创建链接组件并先加载渲染该组件

标签： reactjs react-native routing

【解决方案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

类似这样，也用路由器包裹

【讨论】：