如何在路线更改时隐藏反应组件？

Question

I'm using react router dom's location prop to setState to false and render component only If it's true like this in react:

const [ showFilter, setShowFilter ] = useState(false);
const location = useHistory().location;

useEffect(() => {
            switch (location.pathname) {
                case '/signup':
                    return setShowFilter(false);
                case '/add/:id':
                    console.log(location);
                    return setShowFilter(false);
                default:
                    return setShowFilter(true);
            }
        },
        [ location ]
    );

   <Route exact path="/signup" component={SignUp} />
   <Route exact path="/add/:id" component={AddPage} />

{showFilter ? <FilterComp class="mr-2" location={location} /> : null}

So whenever the location changes the useEffect will run and If location is equal to one of switch cases it will setState to false and FilterComp component will be hidden.

The problem is the /add/:id route location pathname will be something like this:

/add/2

and using '/add/:id' in switch statement doesn't work so I have to know all the:id's and include all of them in switch statement which is impossible.

I cant find a way to include this logic in the switch statement like other routes.

How can I properly setState to false when the location prop has parameters like this /add/:something ?

Answer 1

Instead of switch , you can use if .

if (location.pathname.startsWith('/add/')) {
    setShowFilter(false)
} else if (location.pathname.startsWith('/signup')) {
    setShowFilter(false)
} else {
    setShowFilter(true)
}

Answer 2

As far as I know, you cannot use a regular expression as case of a switch statement; you can either use a series of if...else if...else statements or do something like this:

// ...    
const re = /^(\/signup)|^(\/add\/\d+)/; // a regular expression containing the routes where you want to hide the filter

useEffect(() => {
    setShowFilter(!re.test(location.pathname));
}, [location, re]);
// ...