【发布时间】：2020-02-03 13:49:31
【问题描述】：
我正在处理一个 React 项目，我的站点主页带有默认导航栏，但我希望站点仪表板具有与站点其他页面不同的导航栏。
我尝试创建 2 个 <Layout> components 来带孩子并显示不同的导航栏。然后我根据我想要显示的导航栏用它们包装我的组件。但是 react-router 有这个问题。以下是我的代码：
<>
<Switch>
<Route exact path="/admin/login" component={ Login } />
<Dashboard>
<Route exact path="/admin/dashboard/" component={ DashboardHome } />
<Route exact path="/admin/dashboard/about" component={ AboutForm } />
<Route exact path="/admin/dashboard/properties" component={ Allproperties } />
<Route exact path="/admin/dashboard/contact" component={ ContactFrom } />
<Route exact path="/admin/dashboard/newproperty" component={ Newproperty } />
{/* <Route exact path="/admin/dashboard/messages" component={ Messages } /> */}
</Dashboard>
<Layout>
<Route exact path="/" component={ Home } />
<Route exact path="/properties/" component={ Properties } />
<Route exact path="/services/" component={ Services } />
<Route exact path="/contact/" component={ ContactMe } />
<Route exact path="/property/:slug" component={ SingleProperty } />
<Route component={ Errors } />
</Layout>
</Switch>
</>
Layout组件的代码：
import React from 'react';
// components
import Navbar from './Navbar'
const Layout = ({children}) => {
return (
<>
<Navbar />
{children}
</>
);
}
export default Layout;
仪表板布局组件的代码：
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
// style
import './Dashboard.css'
// components
import DashboardNav from '../components/DashboardNav'
const Dashboard = ({ children }) => {
return (
<section className="">
<div className="row">
<div id="main" className="col-sm-12 d-flex">
<aside id="sidebar" className="dashboard col-md-2 bg-secondary">
<ul className="nav flex-column justify-content-center align-items-center">
<li className="nav-item py-md-4 px-md-3">
<Link className="nav-link active text-white" to="#">Logo</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link active text-white" to="#">Dashboard</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link text-white" to="#">All Properties</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link text-white" to="#">New Properties</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link text-white" to="#">Messages</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link text-white" to="#">About</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link text-white" to="#">Contact</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link text-white" to="#">Blog</Link>
</li>
<li className="nav-item p-md-3">
<Link className="nav-link text-white" to="#">Logout</Link>
</li>
</ul>
</aside>
<article id="dashboard" className="col-sm-12 col-md-10">
<header id="menu" className="dashboard d-flex flex-column">
<DashboardNav />
</header>
<main className="py-md-3">
{/* { loading && <Loading /> } */}
{ children }
</main>
</article>
</div>
</div>
</section>
)
}
export default Dashboard
当我导航到localhost:3000/admin/dashboard 路线时，一切正常，包括沿/admin/dashboard/* 的所有路线，问题是当我导航到localhost:3000 时，它仍然显示仪表板。
我知道有一种方法可以实现这一点。但作为我的第一次，我很难正确地实现它。
【问题讨论】：
标签： javascript reactjs react-native react-redux react-router