【发布时间】：2020-07-23 03:43:06
【问题描述】：
我在 React 中设计了一个带有侧边栏和顶部菜单的管理面板。当您单击侧边栏上的任何链接时，需要在顶部菜单下显示一个组件。但是即使路由器链接正常工作（它们更改了 URL，并且当我单独加载路由器链接时它们显示单个组件），当我单击侧边栏链接时，它们不会在顶部菜单下和侧边栏旁边显示任何内容. 似乎是什么问题？
编辑：项目的github链接，其实是一个很轻的项目： https://github.com/LaMentaAzul/Test
Sidebar.js
import{ BrowserRouter,Route, Link } from 'react-router-dom'
import {routes} from './../../routes.js'
import CreateJob from './../../Views/Forms/CreateJob.js'
import BasicInfo from './../../Views/Contents/BasicInfo.js'
import Dashboard from './../../Views/Contents/Dashboard.js'
....
class Sidebar extends Component {
state = {
navActive : '0'
}
render () {
return (
<BrowserRouter>
<ContainerVertical style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}} >
<ContainerHorizontal >
<NavPanel dark >
<NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
لوگو اینجا قرار بگیرد
</NavTitle>
<NavSection>
<NavSectionTitle />
<NavSectionTitle />
<NavLink key='1' style={linkStyles.base} rightEl={<FiMonitor style={linkStyles.Icon} />} className={this.state.navActive === '1' ? 'active' :' ' }
onClick={() => this.setState({ navActive:'1' })} style={this.state.navActive !== '1' ? {fontFamily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
borderWidth:'0px 5px 0px 0px',
borderColor:'#50d48b'
}
}
>
<Link Component={Dashboard} style={{color:'lightblue'}} to='/dashboard'>داشبورد</Link>
</NavLink>
........
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</NavPanel>
</ContainerHorizontal>
</ContainerVertical>
</BrowserRouter>
)
}
}
export default Sidebar
routes.js
import React from 'react'
export const routes = [
{
path: '/dashboard',
exact: true
},
{
path: '/createjob',
exact: true
}
....
]
export default routes
HRPanel.js
import SideBar from './../../Components/SideBar/SideBar'
import NavBar from './../Navigation Bar/NavBar.js'
class HRPanel extends Component {
render () {
return (
<div id='App'>
<SideBar />
<NavBar />
</div>
)
}
}
export default HRPanel
Dashboard.js（侧边栏中需要在顶栏下加载的链接之一的示例组件）
class Dashboard extends Component {
render () {
return (
<ContainerVertical>
<ContainerHorizontal>
<ScrollArea>
<WidgetContainer style={{
background: 'var(--bg-base)',
border: '1px solid var(--border-color-base)',
height: '400px',
width: '100px',
position: 'relative',
top: '500px'
}}
>
<Widget padding>
<h2>
Title
</h2>
</Widget>
</WidgetContainer>
</ScrollArea>
</ContainerHorizontal>
</ContainerVertical>
)
}
}
export default Dashboard
App.js
.....
import Insurance from './Views/Contents/Insurance.js'
import Jobs from './Views/Contents/Jobs.js'
import Management from './Views/Contents/Management.js'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
function App () {
return (
<Router>
<Switch>
<Route exact path='/' component={Login} />
<Route exact path='/hrpanel' component={HRPanel} />
<Route exact path='/createjob' component={CreateJob} />
<Route exact path='/basicinfo' component={BasicInfo} />
<Route exact path='/dashboard' component={Dashboard} />
<Route exact path='/education' component={Education} />
<Route exact path='/feedback' component={Feedback} />
<Route exact path='/finance' component={Finance} />
<Route exact path='/insurance' component={Insurance} />
<Route exact path='/jobs' component={Jobs} />
<Route exact path='/management' component={Management} />
</Switch>
</Router>
// <Login> </Login>
// <HRPanel> </HRPanel>
)
}
export default App
似乎是什么问题？
【问题讨论】：
-
你的代码很长。请提供一个最小的示例，以便更容易为您提供帮助
-
或者尝试获取codeandbox
-
在代码和框等上创建您问题的简化版本，以便我们了解实际发生的情况
-
@ZohaibIjaz 不幸的是，我无法设置 asndbox。如果你们从 github 上撤下这个项目，我会非常感激，因为我快到最后期限了：github.com/LaMentaAzul/Test/tree/master/front
标签： javascript reactjs react-router jsx react-router-dom