javascript - react 路由器 : hiding or removing a component on a specific path

Question

我正在尝试隐藏收藏夹页面上的搜索栏 - 现在，当您单击收藏夹页面时，搜索栏仍然会显示。这是我的代码:

<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>

在“/favouritetabs”路由路径中，我希望理想地删除或隐藏搜索。这样做的最佳方法是什么？

Answer 1

你可以像下面这样实现它:

import React, { Component } from 'react';
import { withRouter, Switch } from 'react-router-dom';

import Route from 'react-router-dom/Route';


export class AppView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            location: '/'
        }

    }

    componentDidMount() {

        this.unlistenHistory = this.props.history.listen((location, action) => {

            this.setState(_ => ({ location: location.pathname }));
        });
    }
    componentWillUnmount() {

        this.unlistenHistory();
    }

    render() {
        const { location } = this.state;
        return (
            <div className='app-view'>
                <div>
                    <div>
                        {
                            location !== '/favouritetabs' &&
                            <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>
            </div>
        )
    }
}

export default withRouter(AppView);