React配置Dashboard组件嵌套路由时侧边栏跳转空页面问题求助

正在开发一款包含4个主页面的应用，每个页面内包含多个子组件。

页面列表 #

• Home
• Dashboard

子组件归属 #

• Home 下包含：Services、About、Login
• Dashboard 下包含：Profile、ListUsers、SearchTweets 等

问题描述 #

Home页面的组件与路由配置运行完全正常，问题出在Dashboard页面：点击Dashboard左侧导航栏的Profile选项时，组件没有加载到右侧面板中，反而跳转到了空的Profile页面。

Dashboard组件代码 #

import React from 'react'
import { Route } from "react-router-dom"
import "./dashboard-style.css"
// protected for only authenticated or logged in users 
import NavDashboard from "../components/Navigation/dashboard-nav"
import Profile from "../components/Profile/profile"
function Dashboard() {
    return (
        <div className="outer-dash-container">
            <div className="left-dash-nav">
                <NavDashboard />
            </div>
            <div className="right-dash-panel">
                <h1>I want to show my componets here </h1>
                <Route exact path="/profile" component={Profile} />
            </div>
        </div>
    )
}

export default Dashboard

Dashboard导航栏代码 #

import React from 'react'
import { Link, Route } from "react-router-dom"
import "./navbar-style.css"
function NavDashboard() {
    return (
        <>

            <div className="nav-dash-left">
                <div className="logo">
                    {/* <h1><b className="text-format">Tox</b><i>D</i>etector</h1> */}
                </div>
                <ul>
                    <li className="nav-link nav-link-dash"><Link to="/profile" className="nav-link"> Profile</Link></li>
                    <li className="nav-link nav-link-dash"><Link to="/block" ></Link>
                        List User
                    </li>
                    <li className="nav-link nav-link-dash">Search Tweet</li>
                    <li className="nav-link nav-link-dash">Check Stat</li>
                    <li className="nav-link nav-link-dash"> Search By Cities</li>
                </ul>

            </div>


        </>
    )
}

export default NavDashboard

App根路由配置代码 #

import './App.css';
import Register from "../src/components/User_Manage/register"
import { Route, Redirect } from "react-router-dom"
import Login from './components/User_Manage/login';
import Home from './pages/Home'
import Dashboard from "./pages/Dashboard"
function App() {

  return (
    <>
  <Route exact path="/" component={Home} />
      <Route exact path="/register" component={Register} />
      <Route exact path="/login" component={Login} />
      <Route exact path="/dashboard" component={Dashboard} />
    

    </>
  );
}

export default App;

问题由嵌套路由配置错误导致，共有3处需要修改：

1. 修改App根路由配置：去掉/dashboard路由的exact严格匹配属性，确保所有/dashboard开头的路径都能渲染Dashboard组件，代码修改后如下：

<Route path="/dashboard" component={Dashboard} />

2. 修改Dashboard内部子路由路径：将Profile的路由路径调整为嵌套路径，避免直接占用根路径/profile，可通过match.url动态获取Dashboard的路由前缀，适配性更强：

// Dashboard组件内修改Route配置
<Route exact path={`${props.match.url}/profile`} component={Profile} />

3. 修改导航栏跳转路径：将Profile对应的Link跳转目标改为嵌套路由路径：

<Link to="/dashboard/profile" className="nav-link"> Profile</Link>

修改完成后，点击Profile选项时路径会变为/dashboard/profile，首先命中根路由的/dashboard规则渲染Dashboard整体布局，之后命中Dashboard内部的子路由规则，将Profile组件渲染到右侧面板区域，不会再出现跳转到空白页面的问题。

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