在react js中路由另一个页面时隐藏组件

Question

在主页内的react项目中，我有一个通知组件，当我路由到另一个页面并再次访问主页时，我想隐藏通知组件。我该怎么做？请给我一些如何做的建议。

Answer 1

您可以在具有所有页面路由的组件的状态下操作通知的状态，例如：

const [needsNotification, setNeedsNotification] = useState('true');

<Switch>
<Route
path={'/home'}
render={<Home props={...props, needsNotification}} />
/>
<Route
path={'/another-page'}
render={<AnotherPage props={...props, setNeedsNotification} />}
/>
<Switch/>

在AnotherPage组件中，当它装载时，您使用函数props.setNeedsNotification(false)，在主页中，您创建了一个条件，即只有在needsNotification === true时才会显示警告。