反应路由器，路由除 Path 之外的所有路由

Question

我有一个反应路由器开关，我需要除“/terms”之外的任何路径来呈现 CompetitionContent 组件。以及呈现术语组件的 /terms 路径。

问题在于 url '/test' 正确呈现了 CompetitionContent 组件。但是当我导航到“/terms”时，会显示两个组件，而不仅仅是术语组件。

为什么会发生这种情况？我的理解是开关会在第一场比赛后退出？

function Competition(){

    return(
        <div class="container-fluid competition-container">
            <div class="col-12"><Banner/></div>
            <div class="col-12 competition-content">
            
        <Switch>
            <Route exact path="/terms" component={Terms}/>
            <Route path="/" component={CompetitionContent}/>
        </Switch>
       
            </div>
            <div class="col-12"><Footer/></div>
        </div>
    )
}
export default Competition

Answer 1

您需要在<Route exact path="/" component={CompetitionContent}/>中添加exact

之后，您需要添加更多路由以将所有其他路由重定向到/：

<Route path="*" component={() => <Redirect to="/" />}/>