我如何为我的仪表板组件使用反应嵌套路由答案

【问题标题】：How i use react nested routing for my dashboard component我如何为我的仪表板组件使用反应嵌套路由
【发布时间】：2021-10-24 18:16:40
【问题描述】：

我正在构建一个有 4 个主页面的应用程序，每个页面内部都有各种组件。

页面

首页
仪表板

组件

首页 > （服务、关于、登录）
仪表板（个人资料、列表用户、搜索推文等...）

问题：

所以主页组件及其路由非常好。问题出在仪表板页面上。如果我单击左侧仪表板导航栏中的配置文件组件，请不要在右侧加载组件。除了它将我重定向到配置文件空页面（附加图片） [[1]][1]

仪表板代码

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

仪表板导航栏代码

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

这是我的应用路由

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;

【问题讨论】：

我无法使用您提供的代码重现您的问题。我试过codesandbox.io，它似乎工作。
自己试试codesandbox.io/s/objective-proskuriakova-6wt47
我在 app.js 中也有路由。请检查我还在问题中添加了我的 app.js。可能是这个问题有两个路由，一个在 app.js，另一个在仪表板跨度>

标签： reactjs routes react-router nested react-router-dom

【解决方案1】：

从您嵌套路由的位置删除它会正常工作。

【讨论】：