删除或隐藏特定路径路径上的组件

Question

在我的应用程序中，当您单击/ favouritetabs路径路径时，仍会呈现搜索栏，理想情况下，我希望在收藏页面上不可见。这是我的代码：

<div>
    <div>
       <SearchTab search={this.handleSubmit} value={this.handleChange}/>
    </div>
</div>

<Switch className="wrapper2 songContainer">
    <Route exact path="/home" render={props => <SongInfo {...props} artist={this.state.artistName} title={this.state.songTitle} link={this.state.tabId} />} />
    <Route exact path="/favouritetabs" component={FavouriteTabs} />} />
</Switch>

这样做最好的方法是什么？

Answer 1

根据这些信息，您似乎希望为SearchTab的路线显示/favouritetabs 除以外的。

这里最简单的方法是在另一个Switch检查第一条路线中的/favouritetabs，第二条路线匹配任何东西（或任何你想要匹配的东西）

const searchTab = () => (
    <SearchTab 
        search={this.handleSubmit} 
        value={this.handleChange} />
);

// ...

<div>
    <div>
       <Switch>
           <Route exact path={`/favouritetabs`} component={null} />
           <Route component={searchTab} />
       </Switch>
    </div>
</div>