react-router v6 双渲染组件

Question

这是我的第一个 CRA/打字稿、SPA 项目，如果这是一个初学者问题，我们深表歉意。最初，我的所有路由都将通过我的导航栏处理。

到目前为止，当您单击导航栏时，您会根据需要在屏幕顶部看到该组件，但如果您向下滚动，您还会看到重复的初始页面布局。

所以我的问题是如何将我的导航 link 锚定到一个组件，而不是仅仅将该组件带到页面顶部以再次重复。下面是我的代码的 link。

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { render } from "react-dom";
import './index.scss';
import App from './components/App/App';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Gallery from './components/Gallery/Gallery';
import About from './components/About/About';


const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="/about" element={<About />} />
        <Route path="/gallery" element={<Gallery />} />
      </Route>
    </Routes>
  </BrowserRouter>,
  rootElement
);

App.jsx

import './App.scss';
import React from 'react';
import NavBar from '../NavBar/NavBar.tsx';
import About from '../About/About.tsx';
import GalleryCard from '../Gallery/Gallery.tsx';
import Divider from '@mui/material/Divider';


const App = () => {
  const background =  require("../../assets/images/45-degree-fabric-light.png")

  return (
    <div className="App">
      <div className='background'>
        <img src={background} className='background' alt="background" />
      </div>
      <NavBar/>
      <Divider className='divider' textAlign="left">GALLERY</Divider>
      <div className='card-container'>
        <GalleryCard/>
      </div>
      <Divider className='divider' textAlign="left">ABOUT</Divider>
      <About/>

    </div>
  );
}

export default App;

NavBar.tsx

import React from 'react';
import { Link, Outlet} from "react-router-dom";
import HomeButton from './HomeButton';
import './navbar.scss';


const NavBar = () => {

    return (
        <>
        <nav className='nav-container'>
      <Link to='/'><HomeButton/></Link>
            <div className='inner-container'>
                <div className='nav-links'>
                    <Link to='/' className='nav-link' >Home</Link>
                    <Link to='/gallery' className='nav-link' >Gallery</Link>
                    <Link to='/about' className='nav-link' >About</Link>
                    <Link to='/videos' className='nav-link' >Videos</Link>
                    <Link to='/contact' className='nav-link' >Contact</Link>
                </div>
            </div>
        </nav>
        <Outlet />
        </>
    )

}
export default NavBar;

Answer 1

GalleryCard和About组件渲染了两次，因为它们在两个地方渲染。

索引

<Routes>
  <Route path="/" element={<App />}>
    <Route path="/about" element={<About />} />     // <-- here
    <Route path="/gallery" element={<Gallery />} /> // <-- here
  </Route>
</Routes>

应用程序

const App = () => {
  const background =  require("../../assets/images/45-degree-fabric-light.png")

  return (
    <div className="App">
      <div className='background'>
        <img src={background} className='background' alt="background" />
      </div>
      <NavBar/>
      <Divider className='divider' textAlign="left">GALLERY</Divider>
      <div className='card-container'>
        <GalleryCard/> // <-- and here
      </div>
      <Divider className='divider' textAlign="left">ABOUT</Divider>
      <About/> // <-- and here
    </div>
  );
}

从 App 中删除它们，用 Outlet 组件替换它们，以便嵌套路由在它们的位置呈现。

import { Outlet } from 'react-router-dom';

...

const App = () => {
  const background =  require("../../assets/images/45-degree-fabric-light.png")

  return (
    <div className="App">
      <div className='background'>
        <img src={background} className='background' alt="background" />
      </div>
      <NavBar/>
      <Outlet />
    </div>
  );
}

将分隔符和标题移至组件。

react-router v6 双渲染组件

react-router v6 double rendering components

typescript

react-router

create-react-app

single-page-application