我如何为我的仪表板组件使用react嵌套路由

Question

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

页

回家

仪表盘

组件

1. 家比;(服务、对登录)

2. Dashboard(Profile,ListUsers,SearchTweets等)

问题:

所以主页组件和它的路由是完美的。问题出在仪表板页面上。如果我单击左侧仪表板导航条中的配置文件组件，则不会加载右侧的组件。此外，它重定向到我的个人资料空页(图片是附件)[[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;

Answer 1

从你嵌套路由的位置移除，它将正常工作。