防止组件挂载到React Router的每次渲染

Question

我想防止每个组件在每个渲染上被挂载，我使用React Router，

我将它们从component={ComponentName}加载到render{() => < ComponentName />}，但没有成功。

似乎这是自然的行为，但我想一定有办法改变它

这是我的App.js

export default function App() {
return ( 
<div className = "App" >
<Provider store={store}>
<Route path="/" render={() => <Header />} />  
<Route exact path="/" render={() => <ShowSplashWindow />} />  
<Route path="/countries" render={() => <Countries />} />  
<Route path="/createactivity" render={() => <CreateActivity />} />  
</Provider>
</div>
);
}

以下是我的路由路径:

<nav className={style.nav}>
<Link to="/" className={style.subNav}>
<p>Init</p>
</Link>
<Link to="/countries" className={style.subNav}>
<p>Countries</p>
</Link>
<Link to="/createactivity" className={style.subNav}>
<p>Create Activities</p>
</Link>
</nav>

我已经搜索了互联网，它说渲染方法解决了这个问题，但在我的情况下，它没有

拉斐尔

Answer 1

从react-router-dom中使用Switch组件。文档说:

这与仅仅使用一堆Routes有什么不同?Switch是唯一的，因为它独占地呈现路由。相比之下，每个与位置匹配的Route都包含呈现。

export default function App() {
return ( 
<div className = "App" >
<Provider store={store}>
<Route path="/" render={() => <Header />} />  
<Switch>
<Route exact path="/" render={() => <ShowSplashWindow />} />  
<Route path="/countries" render={() => <Countries />} />  
<Route path="/createactivity" render={() => <CreateActivity />} />  
</Switch>
</Provider>
</div>
);
}