如何防止同一组件在导航时重新呈现？反应路由器v6
如何防止同一组件在导航时重新呈现？反应路由器v6
提问于 2022-01-23 05:22:50
我是新手，当我导航到另一个页面时，我很难阻止组件重新呈现。我试图导航到我的注册和登录页面，它只有一行文本，这是我唯一想要显示的东西。
问题是，每次我浏览链接时，Navbar都会重新呈现。我尝试了不同的时间对反应路由器v6，但纳威总是重新呈现在下面，当我导航。我只想让文字只显示在屏幕上，但导航栏仍然显示。
我没有将Navbar作为一个路由包含在我的代码中，但是每当我导航到一个不同的链接时，它都会显示出来，并且我的图像滑块也会使用旋转木马显示。
App.js
import React from 'react';
import Navbar from './Components/Navbar/Navbar';
import ImageSlider from './Components/Slideshow/ImageSlider';
import {BrowserRouter as Router, Route, Routes, Switch} from 'react-router-dom';
import Signup from './Components/Navbar/Signup';
import Login from './Components/Navbar/Login';
import './App.css';
function App() {
return (
<div className="App">
<Router>
<Navbar></Navbar>
<Routes>
<Route path='/Signup' element={<Signup />}></Route>
<Route path='/Login' element={<Login />}></Route>
</Routes>
</Router>
<ImageSlider></ImageSlider>
</div>
);
}
export default App;Navbar.js
import React from 'react';
import { MenuItems } from "./MenuItems";
import {Link,NavLink} from "react-router-dom";
class Navbar extends React.Component {
render() {
return(
<nav className="NavbarItems">
<ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
{MenuItems.map((item,index) => {
return (
<li key={index}>
<NavLink to={item.url} activeClassName="is-active" className={item.cName} style={{position: 'relative', right: 0, top: 13}}>
{item.title}
</NavLink>
</li>
)
})}
</ul>
</nav>
)
}
}
export default NavbarMenuItems.js
export const MenuItems = [
{
title: 'Home',
url: '/',
cName: 'nav-links'
},
{
title: 'Sign Up',
url: '/Signup',
cName: 'nav-links'
},
{
title: 'Login',
url: '/Login',
cName: 'nav-links'
}
]ImageSlider.js
import React from 'react';
import "bootstrap/dist/css/bootstrap.css";
import Carousel from 'react-bootstrap/Carousel';
export default function ImageSlider() {
return (
<div className='slideshow' style={{ height:120}}>
<Carousel controls={false}>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://cdn.suwalls.com/wallpapers/nature/beautiful-sunset-in-grand-canyon-47489-1920x1080.jpg"
alt="Image One"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://wallpaperaccess.com/full/284466.jpg"
alt="Image Two"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://i.pinimg.com/originals/09/6a/35/096a35453660aa9b83ba4ab6d9182d61.jpg"
alt="Image Two"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://www.teahub.io/photos/full/2-29537_hd-nature-wallpapers-landscape-green-cute-desktop-waterfall.jpg"
alt="Image Two"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://wallpaperaccess.com/full/825200.jpg"
alt="Image Two"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://wallpaperaccess.com/full/825194.jpg"
alt="Image Two"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://hikinglovers.files.wordpress.com/2014/02/high-mountain-hiking-trail-1920x1080-wallpaper-jjr5fr.jpg"
alt="Image Two"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://wallpaperaccess.com/full/1859582.jpg"
alt="Image Two"
/>
</Carousel.Item>
<Carousel.Item interval={1500}>
<img
className="d-block w-100"
src="https://cdn.suwalls.com/wallpapers/nature/mountain-shadowing-upon-the-lake-54621-1920x1200.jpg"
alt="Image Two"
/>
</Carousel.Item>
</Carousel>
</div>
);
}Stack Overflow用户
回答已采纳
发布于 2022-01-23 06:51:53
启动react router v6，您可以拆分组件并仅在speicifc路由上呈现它们。
你的App.js应该是
<Router>
<Routes>
<Route element={
<>
<Navbar />
<Outlet />
<ImageSlider />
</>
}>
// routes for authenticated users where navbar & image slider should be displayed
<Route path='/home' element={<Home />}> </Route>
</Route>
<Route element={<Outlet />}>
// routes where navbar & image slider is not rendered
<Route path='/Signup' element={<Signup />}> </Route>
<Route path='/Login' element={<Login />}> </Route>
</Route>
</Routes>
</Router>通过这样做，您的/home路由将始终具有Navbar & ImageSlider组件，其中作为客户路由，只有作为支柱传递给路由的元素。
随着应用程序的增长，我建议将其拆分到Layouts文件夹中，以包含
- Auth布局--一个为经过身份验证的用户呈现所有公共组件的组件--
- 来宾布局--一个为来宾用户
呈现所有公共组件的组件
这样您就可以利用异步代码(如useEffect或任何其他钩子)。
我起草了一个演示，展示了如何通过拆分成单独的组件来实现这一目标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70819354
复制相关文章
相似问题
腾讯云开发者
