导航时如何防止相同的组件重新渲染？ 反应路由器 v6

Question

我是新来的反应，当我导航到不同的页面时，我无法阻止组件重新呈现。 我试图导航到我的注册和登录页面，其中只有一行文本，这是我想要显示的唯一内容。

问题是每次我浏览链接时导航栏都会重新呈现。 我为 react-router v6 尝试了不同的时间，但是当我导航时，导航栏总是在下方重新渲染。 我只希望文本只显示在屏幕上，但导航栏仍然显示

我没有在我的代码中包含导航栏作为路线，但每次我导航到不同的链接以及我的图像 slider 和反应引导轮播时都会显示它。

应用程序.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;

导航栏.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

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>
    );
  }

Answer 1

启动react-router-dom v6 ，您可以拆分组件并仅在特定路由上呈现它们。

你的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文件夹以包含

1. Auth Layout - 为经过身份验证的用户呈现所有常见组件的组件
2. 来宾布局 - 为来宾用户呈现所有常见组件的组件

这样您就可以利用诸如useEffect或任何其他钩子之类的异步代码。

我已经起草了一个演示来展示如何通过拆分成单独的组件来实现这一点。

https://codesandbox.io/s/multiple-layouts-react-7r8qu