React路由跳转异常：Navbar作为布局时页面空白问题排查

你的问题出在两个核心点：父路由组件没有渲染子路由的出口，以及导航链接用了原生a标签导致路由失效。下面是具体修复步骤：

1. 给Navbar添加子路由出口（Outlet） #

React Router v6中，嵌套路由的父组件必须通过<Outlet />来渲染子路由的内容，否则子页面永远不会显示。

修改Navbar组件：

// 先导入Outlet和Link
import { Outlet, Link } from 'react-router-dom';
import { Component } from 'react';

class Navbar extends Component{
    state = { clicked: false}

    handleClick = () =>{
        this.setState({clicked: !this.state.clicked})
    }

    render(){
        return(
            <>
                <nav className='navbar-items'>
                    {/* 把img的href换成Link包裹，避免页面刷新 */}
                    <Link to="/">
                        <img alt='mRadio' className='navbar-logo' src={require('../../assets/images/mRadio.png')}></img>
                    </Link>
                    <div className='menu-icon' onClick={this.handleClick}>
                        <i className={this.state.clicked ? 'fas fa-times' : 'fas fa-bars'}></i>
                    </div>
                    <ul className={this.state.clicked ? 'nav-menu active' : 'nav-menu'}>
                        {MenuItems.map((item, index)=>{
                            return (
                                <li key={index}>
                                    {/* 把原生a标签换成Link，用to代替href */}
                                    <Link className={item.cName} to={item.url}>{item.title}</Link>
                                </li>
                            )                            
                        })}                   
                    </ul>
                </nav>
                {/* 子路由的内容会渲染在这个Outlet位置 */}
                <Outlet />
            </>
        )  
    } 
}

export default Navbar;

2. 简化App.js的路由配置 #

React Router v6中exact属性已经默认生效，不需要手动添加：

import React from 'react';
import { Route, Routes } from 'react-router-dom'; // 注意导入react-router-dom，不是react-router
import './App.scss';
import Navbar from './components/Navbar/Navbar'
import Home from './components/Home/index'
import Contact from './components/Contact'

const App = () => {
    return (
        <Routes>
            <Route path='/' element={<Navbar/>}>
                <Route index element={<Home/>}></Route>
                <Route path='contact' element={<Contact/>}></Route>
            </Route>      
        </Routes>
    );
}

export default App;

3. 检查页面组件的导出 #

确保Home和Contact组件正确导出：

• Home页面（./components/Home/index.js）：

import videomRadio from '../path/to/your/video'; // 确保视频路径正确

const Index = () => {
    return (
        <div className='main'>
            <video src={videomRadio} autoPlay loop muted/>
        </div>
    );
}

export default Index; // 必须导出组件

• Contact页面（./components/Contact/index.js）：

const Index = () => {
    return (
        <div>
            <p>CONTACT PAGE</p>
        </div>
    );
}

export default Index; // 必须导出组件

4. 确认index.js的导入 #

确保index.js正确导入BrowserRouter：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <React.StrictMode>
        <BrowserRouter> 
            <App />
        </BrowserRouter>
    </React.StrictMode>
);

完成以上修改后，嵌套路由就能正常工作：Navbar会一直显示，点击导航链接时，对应的Home/Contact页面会渲染在Navbar下方的Outlet位置。

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