[英]How to prevent same component from re-rendering when navigating? React Router v6
I'm new to react and I'm having trouble preventing the components from re-rendering when I navigate to a different page.我是新来的反应,当我导航到不同的页面时,我无法阻止组件重新呈现。 Im trying to navigate to my Signup and login page which have nothing but a line of text which is the ONLY thing I want displayed.我试图导航到我的注册和登录页面,其中只有一行文本,这是我想要显示的唯一内容。
The problem is that the Navbar re-renders each time I navigate through the links.问题是每次我浏览链接时导航栏都会重新呈现。 I tried different times for react-router v6 but the Navbar is always re-rendering below when I navigate.我为 react-router v6 尝试了不同的时间,但是当我导航时,导航栏总是在下方重新渲染。 I simply want the text shown only on the screen but the navbar still shows up我只希望文本只显示在屏幕上,但导航栏仍然显示
I did not include the Navbar as a Route in my code, but it is being shown every time I navigate to a different link as well as my image slider with react bootstrap carousel.我没有在我的代码中包含导航栏作为路线,但每次我导航到不同的链接以及我的图像 slider 和反应引导轮播时都会显示它。
App.js应用程序.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导航栏.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 Navbar
MenuItems.js MenuItems.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 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>
);
}
Starting react-router-dom v6 , you can split your components and have them rendered only on speicifc routes.启动react-router-dom v6 ,您可以拆分组件并仅在特定路由上呈现它们。
Your App.js
should be like你的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>
By doing this, your /home
route will always have Navbar
& ImageSlider
component, where as the guest routes will have only the element that is passed as prop to the route.通过这样做,您的/home
路由将始终具有Navbar
和ImageSlider
组件,其中来宾路由将仅具有作为道具传递给路由的元素。
As your app grows, I'd suggest to split this into Layouts
folder to contain随着您的应用程序的增长,我建议将其拆分为Layouts
文件夹以包含
so that you can leverage from async code like useEffect
or any other hook.这样您就可以利用诸如useEffect
或任何其他钩子之类的异步代码。
I've drafted a demo to showcase how you can use achieve this by splitting into seperate components.我已经起草了一个演示来展示如何通过拆分成单独的组件来实现这一点。
https://codesandbox.io/s/multiple-layouts-react-7r8qu https://codesandbox.io/s/multiple-layouts-react-7r8qu
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.