React按钮点击后页面未正确路由渲染问题排查求助

问题根源 #

1. 路由容器导入错误：错误地将BrowserRouter别名成Route，导致路由系统没有正确初始化。
2. 页面组件未纳入路由配置：LandingPage直接渲染在DOM中，未作为路由组件配置，导致路由切换时它始终显示，目标组件仅追加在其下方。
3. 冗余跳转逻辑：同时使用Link和useNavigate处理跳转，且Link使用了相对路径，易引发路径解析问题。
4. 组件名不符合规范：scroll.js中的组件名使用小写开头，违反React组件名必须大写的规则。

修改后的完整代码 #

App.js

import * as React from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { LandingPage, NavBar, Footer } from './Containers';
import './App.css';
import Scroll from './scroll';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <NavBar />
        {/* 所有页面组件通过Routes管理，路由切换时自动替换渲染 */}
        <Routes>
          <Route path="/" element={<LandingPage />} />
          <Route path="/scroll" element={<Scroll />} />
        </Routes>
        <Footer />
      </div>
    </BrowserRouter>
  );
}
export default App;

LandingPage.js

import React from "react";
import { Link } from "react-router-dom";
import "./landingPage.css";

const LandingPage = () => {
  return (
    <>
      <div>
        <div>
          <div>
            <h1>Amet minim mollit non deserunt ullamco est sit aliqua dolor doamet sint. Velit officia</h1>
            <p>Amet minim mollit non deserunt ullamco est sit aliqua dolor doamet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.</p>
            <h3>
              <div>
                {/* 直接使用Link的绝对路径跳转，无需额外useNavigate */}
                <Link to="/scroll">
                  <button>
                    <bold>Get Started</bold>
                  </button>
                </Link>
              </div>
            </h3>
          </div>
        </div>
      </div>
    </>
  );
};

export default LandingPage;

scroll.js

import React from 'react'
import HorizontalScroll from 'react-scroll-horizontal';

import './scroll.css';

import { Execution1, Execution2, Execution3, Execution4, Execution5, Execution6, Onboarding, PDP } from './Containers';

// 组件名改为大写开头，符合React规范
function Scroll() {
    const containerStyle = {height: `77%`, width: `100vw`}
  return (
    <>
      <HorizontalScroll reverseScroll={true} style={containerStyle} >
        <PDP className="main"/>
        <Onboarding className="main" />
        <Execution1 className="main" />
        <Execution2 className="main" />
        <Execution3 className="main" /> 
        <Execution4 className="main" />
        <Execution5 className="main" />
        <Execution6 className="main" />
      </HorizontalScroll>
    </>
  )
}

export default Scroll

修改说明 #

1. 正确初始化路由容器：用BrowserRouter包裹整个路由相关内容，确保路由系统正常工作。
2. 统一路由管理：将所有页面组件放在Routes中配置，路由切换时Routes会自动根据URL渲染对应组件，实现页面替换效果。
3. 简化跳转逻辑：仅使用Link组件的绝对路径完成跳转，避免冗余代码和路径解析错误。
4. 规范组件命名：组件名改为大写开头，避免React将其识别为普通HTML标签。

内容的提问来源于stack exchange，提问作者joseph thomas