React Routing实现

问题描述 投票:3回答:1

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

  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个回答
6
投票
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

像这样的事情,也包括路由器

© www.soinside.com 2019 - 2024. All rights reserved.