反应路由器侧边栏路由正确，但未在顶部菜单下显示组件 [英] React router sidebar routes correctly but doesn't show the component under the top menu
问题描述
我在React中设计了一个带有侧边栏和顶部菜单的管理面板.单击侧栏上的任何链接时，需要在顶部菜单下显示一个组件.但是，即使路由器链接正常工作(它们会更改URL，并且在我分别加载路由器链接时它们会显示单个组件)，但是当我单击侧边栏链接时，它们不会在顶部菜单下和侧边栏旁显示任何内容. 似乎是什么问题?
I have designed a management panel in React with a sidebar and a top menu. when you click on any links on the sidebar, a component needs to be shown under the top menu. But even though the router links work correctly (they change the URL and they show the single component when I load the router link separately), they don't show anything under the top menu and next to the sidebar when I click on the sidebar links. what seems to be the problem?
该项目的github链接，它实际上是一个非常轻便的项目: https://github.com/LaMentaAzul/Test
the github link of the project, its actually a very light project: 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
似乎是什么问题?
推荐答案
此处已更新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'
}
}
href="/dashboard"
>
داشبورد
</NavLink>
........
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</NavPanel>
</ContainerHorizontal>
</ContainerVertical>
</BrowserRouter>
)
}
}
export default Sidebar
NavLink和Link都是锚标记，因此不应嵌套.
NavLink and Link are both anchor tags so it shouldnt be nested.
而且，您应该在App.js和Sidebar.js中使用相同的路由器
And, you should use the same router in App.js and Sidebar.js
例如，您的项目现在有不同的路线
For example, your project now has got different routes
<Route exact path='/jobs' component={Jobs} />-App.js
<Link Component={Jobs} style={{color:'lightblue'}} to='/ُjobs'>مشاهده فرصتهای شغلی</Link>-Sidebar.js
<Link Component={Jobs} style={{color:'lightblue'}} to='/ُjobs'>مشاهده فرصتهای شغلی</Link> - Sidebar.js
这篇关于反应路由器侧边栏路由正确，但未在顶部菜单下显示组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
