我正在尝试在我的反应应用程序中实现路由。所以我有一个组件导航到另一个组件:
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;
但我的问题是,当我点击链接时,所选组件将与导航链接一起呈现。但我希望只渲染选定的组件。我应该改变什么?
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
像这样的事情,也包括路由器