Javascript react路由器更改链接url,但不显示组件
我正在react中设计一个侧导航,当我单击侧导航的项目时,我想在侧导航的左侧部分显示一个相关组件。但是,react router会更改URL,但不会在部分中显示组件。这是我的密码: Sidenav.jsJavascript react路由器更改链接url,但不显示组件,javascript,reactjs,react-router,jsx,react-router-dom,Javascript,Reactjs,React Router,Jsx,React Router Dom,我正在react中设计一个侧导航,当我单击侧导航的项目时,我想在侧导航的左侧部分显示一个相关组件。但是,react router会更改URL,但不会在部分中显示组件。这是我的密码: Sidenav.js import{ BrowserRouter,Route, Link } from 'react-router-dom' import {routes} from './../../routes.js' ... class Sidebar extends Component { sta
import{ BrowserRouter,Route, Link } from 'react-router-dom'
import {routes} from './../../routes.js'
...
class Sidebar extends Component {
state = {
navActive : '0'
}
render () {
return (
<BrowserRouter>
<NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}} >
<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 style={{color:'lightblue'}} to='./../../Views/Contents/Dashboard.js'>داشبورد</Link>
</NavLink>
<NavLink key='2' style={linkStyles.base} rightEl={<IoIosAdd style={linkStyles.AddIcon} />} className={this.state.navActive === '2' ? 'active' :' ' }
onClick={() => this.setState({ navActive:'2' })} style={this.state.navActive !== '2' ? {fontFamily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
borderWidth:'0px 5px 0px 0px',
borderColor:'#50d48b'
}
}
>
<Link style={{color:'lightblue'}} to='./../../Views/Forms/CreateJob.js'>اضافه کردن فرصت شغلی</Link>
</NavLink>
....
</NavSection>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</NavPanel>
</BrowserRouter>
)
}
}
export default Radium(Sidebar)
import React from 'react'
export const routes = [
{
path: './../../Views/Contents/Dashboard.js',
exact: true,
main: () => <h2>y</h2>
},
{
path: './../../Views/Contents/CreateJob.js',
exact: true,
main: () => <h2>s</h2>
},
{
path: './../../Views/Contents/Job.js',
exact: true,
main: () => <h2>r</h2>
},
......
]
export default routes
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
import React from 'react'
import Login from './Components/Login/Login.js'
import HRPanel from './Components/HR Panel/HRPanel.js'
import CreateJob from './Views/Forms/CreateJob.js'
import BasicInfo from './Views/Contents/BasicInfo.js'
import Dashboard from './Views/Contents/Dashboard.js'
import Education from './Views/Contents/Education.js'
import Feedback from './Views/Contents/Feedback.js'
import Finance from './Views/Contents/Finance.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='./Components/HR Panel/HRPanel.js' component={HRPanel} />
<Route exact path='./Views/Forms/CreateJob.js' component={CreateJob} />
<Route exact path='./Views/Contents/BasicInfo.js' component={BasicInfo} />
<Route exact path='./Views/Contents/Dashboard.js' component={Dashboard} />
<Route exact path='./Views/Contents/Education.js' component={Education} />
<Route exact path='./Views/Contents/Feedback.js' component={Feedback} />
<Route exact path='./Views/Contents/Finance.js' component={Finance} />
<Route exact path='./Views/Contents/Insurance.js' component={Insurance} />
<Route exact path='./Views/Contents/Jobs.js' component={Jobs} />
<Route exact path='./Views/Contents/Management.js' component={Management} />
</Switch>
</Router>
// <Login> </Login>
// <HRPanel> </HRPanel>
)
}
export default App
从'react router dom'导入{BrowserRouter,Route,Link}
从“/../../routes.js”导入{routes}
...
类边栏扩展组件{
状态={
导航活动:“0”
}
渲染(){
返回(
لوگو اینجا قرار بگیرد
this.setState({navActive:'1'})style={this.state.navActive!='1'?{fontFamily:'iransansans'}:{…linkStyles.base,borderStyle:'solid',
边框宽度:“0px 5px 0px 0px”,
边框颜色:“#50d48b”
}
}
>
داشبورد
this.setState({navActive:'2'})style={this.state.navActive!='2'?{fontFamily:'iransansans'}:{…linkStyles.base,borderStyle:'solid',
边框宽度:“0px 5px 0px 0px”,
边框颜色:“#50d48b”
}
}
>
اضافه کردن فرصت شغلی
....
{routes.map((路由,索引)=>(
))}
)
}
}
导出默认镭(侧栏)
routes.js
import{ BrowserRouter,Route, Link } from 'react-router-dom'
import {routes} from './../../routes.js'
...
class Sidebar extends Component {
state = {
navActive : '0'
}
render () {
return (
<BrowserRouter>
<NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}} >
<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 style={{color:'lightblue'}} to='./../../Views/Contents/Dashboard.js'>داشبورد</Link>
</NavLink>
<NavLink key='2' style={linkStyles.base} rightEl={<IoIosAdd style={linkStyles.AddIcon} />} className={this.state.navActive === '2' ? 'active' :' ' }
onClick={() => this.setState({ navActive:'2' })} style={this.state.navActive !== '2' ? {fontFamily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
borderWidth:'0px 5px 0px 0px',
borderColor:'#50d48b'
}
}
>
<Link style={{color:'lightblue'}} to='./../../Views/Forms/CreateJob.js'>اضافه کردن فرصت شغلی</Link>
</NavLink>
....
</NavSection>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</NavPanel>
</BrowserRouter>
)
}
}
export default Radium(Sidebar)
import React from 'react'
export const routes = [
{
path: './../../Views/Contents/Dashboard.js',
exact: true,
main: () => <h2>y</h2>
},
{
path: './../../Views/Contents/CreateJob.js',
exact: true,
main: () => <h2>s</h2>
},
{
path: './../../Views/Contents/Job.js',
exact: true,
main: () => <h2>r</h2>
},
......
]
export default routes
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
import React from 'react'
import Login from './Components/Login/Login.js'
import HRPanel from './Components/HR Panel/HRPanel.js'
import CreateJob from './Views/Forms/CreateJob.js'
import BasicInfo from './Views/Contents/BasicInfo.js'
import Dashboard from './Views/Contents/Dashboard.js'
import Education from './Views/Contents/Education.js'
import Feedback from './Views/Contents/Feedback.js'
import Finance from './Views/Contents/Finance.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='./Components/HR Panel/HRPanel.js' component={HRPanel} />
<Route exact path='./Views/Forms/CreateJob.js' component={CreateJob} />
<Route exact path='./Views/Contents/BasicInfo.js' component={BasicInfo} />
<Route exact path='./Views/Contents/Dashboard.js' component={Dashboard} />
<Route exact path='./Views/Contents/Education.js' component={Education} />
<Route exact path='./Views/Contents/Feedback.js' component={Feedback} />
<Route exact path='./Views/Contents/Finance.js' component={Finance} />
<Route exact path='./Views/Contents/Insurance.js' component={Insurance} />
<Route exact path='./Views/Contents/Jobs.js' component={Jobs} />
<Route exact path='./Views/Contents/Management.js' component={Management} />
</Switch>
</Router>
// <Login> </Login>
// <HRPanel> </HRPanel>
)
}
export default App
从“React”导入React
导出常量路由=[
{
路径:'./../../Views/Contents/Dashboard.js',
确切地说:是的,
main:()=>y
},
{
路径:'./../../Views/Contents/CreateJob.js',
确切地说:是的,
main:()=>s
},
{
路径:'./../../Views/Contents/Job.js',
确切地说:是的,
main:()=>r
},
......
]
导出默认路由
HRPanel.js
import{ BrowserRouter,Route, Link } from 'react-router-dom'
import {routes} from './../../routes.js'
...
class Sidebar extends Component {
state = {
navActive : '0'
}
render () {
return (
<BrowserRouter>
<NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}} >
<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 style={{color:'lightblue'}} to='./../../Views/Contents/Dashboard.js'>داشبورد</Link>
</NavLink>
<NavLink key='2' style={linkStyles.base} rightEl={<IoIosAdd style={linkStyles.AddIcon} />} className={this.state.navActive === '2' ? 'active' :' ' }
onClick={() => this.setState({ navActive:'2' })} style={this.state.navActive !== '2' ? {fontFamily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
borderWidth:'0px 5px 0px 0px',
borderColor:'#50d48b'
}
}
>
<Link style={{color:'lightblue'}} to='./../../Views/Forms/CreateJob.js'>اضافه کردن فرصت شغلی</Link>
</NavLink>
....
</NavSection>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</NavPanel>
</BrowserRouter>
)
}
}
export default Radium(Sidebar)
import React from 'react'
export const routes = [
{
path: './../../Views/Contents/Dashboard.js',
exact: true,
main: () => <h2>y</h2>
},
{
path: './../../Views/Contents/CreateJob.js',
exact: true,
main: () => <h2>s</h2>
},
{
path: './../../Views/Contents/Job.js',
exact: true,
main: () => <h2>r</h2>
},
......
]
export default routes
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
import React from 'react'
import Login from './Components/Login/Login.js'
import HRPanel from './Components/HR Panel/HRPanel.js'
import CreateJob from './Views/Forms/CreateJob.js'
import BasicInfo from './Views/Contents/BasicInfo.js'
import Dashboard from './Views/Contents/Dashboard.js'
import Education from './Views/Contents/Education.js'
import Feedback from './Views/Contents/Feedback.js'
import Finance from './Views/Contents/Finance.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='./Components/HR Panel/HRPanel.js' component={HRPanel} />
<Route exact path='./Views/Forms/CreateJob.js' component={CreateJob} />
<Route exact path='./Views/Contents/BasicInfo.js' component={BasicInfo} />
<Route exact path='./Views/Contents/Dashboard.js' component={Dashboard} />
<Route exact path='./Views/Contents/Education.js' component={Education} />
<Route exact path='./Views/Contents/Feedback.js' component={Feedback} />
<Route exact path='./Views/Contents/Finance.js' component={Finance} />
<Route exact path='./Views/Contents/Insurance.js' component={Insurance} />
<Route exact path='./Views/Contents/Jobs.js' component={Jobs} />
<Route exact path='./Views/Contents/Management.js' component={Management} />
</Switch>
</Router>
// <Login> </Login>
// <HRPanel> </HRPanel>
)
}
export default App
从“/../../Components/SideBar/SideBar”导入侧栏
从“/../Navigation Bar/NavBar.js”导入导航栏
类HRPanel扩展组件{
渲染(){
返回(
)
}
}
导出默认HRP面板
App.js
import{ BrowserRouter,Route, Link } from 'react-router-dom'
import {routes} from './../../routes.js'
...
class Sidebar extends Component {
state = {
navActive : '0'
}
render () {
return (
<BrowserRouter>
<NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}} >
<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 style={{color:'lightblue'}} to='./../../Views/Contents/Dashboard.js'>داشبورد</Link>
</NavLink>
<NavLink key='2' style={linkStyles.base} rightEl={<IoIosAdd style={linkStyles.AddIcon} />} className={this.state.navActive === '2' ? 'active' :' ' }
onClick={() => this.setState({ navActive:'2' })} style={this.state.navActive !== '2' ? {fontFamily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
borderWidth:'0px 5px 0px 0px',
borderColor:'#50d48b'
}
}
>
<Link style={{color:'lightblue'}} to='./../../Views/Forms/CreateJob.js'>اضافه کردن فرصت شغلی</Link>
</NavLink>
....
</NavSection>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</NavPanel>
</BrowserRouter>
)
}
}
export default Radium(Sidebar)
import React from 'react'
export const routes = [
{
path: './../../Views/Contents/Dashboard.js',
exact: true,
main: () => <h2>y</h2>
},
{
path: './../../Views/Contents/CreateJob.js',
exact: true,
main: () => <h2>s</h2>
},
{
path: './../../Views/Contents/Job.js',
exact: true,
main: () => <h2>r</h2>
},
......
]
export default routes
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
import React from 'react'
import Login from './Components/Login/Login.js'
import HRPanel from './Components/HR Panel/HRPanel.js'
import CreateJob from './Views/Forms/CreateJob.js'
import BasicInfo from './Views/Contents/BasicInfo.js'
import Dashboard from './Views/Contents/Dashboard.js'
import Education from './Views/Contents/Education.js'
import Feedback from './Views/Contents/Feedback.js'
import Finance from './Views/Contents/Finance.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='./Components/HR Panel/HRPanel.js' component={HRPanel} />
<Route exact path='./Views/Forms/CreateJob.js' component={CreateJob} />
<Route exact path='./Views/Contents/BasicInfo.js' component={BasicInfo} />
<Route exact path='./Views/Contents/Dashboard.js' component={Dashboard} />
<Route exact path='./Views/Contents/Education.js' component={Education} />
<Route exact path='./Views/Contents/Feedback.js' component={Feedback} />
<Route exact path='./Views/Contents/Finance.js' component={Finance} />
<Route exact path='./Views/Contents/Insurance.js' component={Insurance} />
<Route exact path='./Views/Contents/Jobs.js' component={Jobs} />
<Route exact path='./Views/Contents/Management.js' component={Management} />
</Switch>
</Router>
// <Login> </Login>
// <HRPanel> </HRPanel>
)
}
export default App
从“React”导入React
从“./Components/Login/Login.js”导入登录名
从“./Components/HR Panel/HRPanel.js”导入HRPanel
从“./Views/Forms/CreateJob.js”导入CreateJob
从“/Views/Contents/BasicInfo.js”导入BasicInfo
从“./Views/Contents/Dashboard.js”导入仪表板
从“/Views/Contents/Education.js”导入教育
从“/Views/Contents/Feedback.js”导入反馈
从“/Views/Contents/Finance.js”导入财务
从“/Views/Contents/Insurance.js”导入保险
从“./Views/Contents/Jobs.js”导入作业
从“./Views/Contents/Management.js”导入管理
从“react Router dom”导入{BrowserRouter as Router,Route,Switch}
函数应用程序(){
返回(
//
//
)
}
导出默认应用程序
出现了什么问题?您为路由
组件指定的道具不正确<代码>路径不是React组件文件的相对文件路径,而是要匹配的URL路径。将组件/文件的所有点中的path
更改为要匹配的URL路径,而不是组件的路径。例如,如果您希望在用户导航到/hr
/时显示面板
,请将路线的路径
更改为
App.js
可能看起来像:
<Switch>
<Route exact path='/' component={Login} />
<Route exact path='/hr' component={HRPanel} />
<Route exact path='/jobs/create' component={CreateJob} /> />
// ... remaining paths
</Switch>
希望这对您错误地为Route
组件指定道具有所帮助<代码>路径
不是React组件文件的相对文件路径,而是要匹配的URL路径。将组件/文件的所有点中的path
更改为要匹配的URL路径,而不是组件的路径。例如,如果您希望在用户导航到/hr
/时显示面板
,请将路线的路径
更改为
App.js
可能看起来像:
<Switch>
<Route exact path='/' component={Login} />
<Route exact path='/hr' component={HRPanel} />
<Route exact path='/jobs/create' component={CreateJob} /> />
// ... remaining paths
</Switch>
希望这能有所帮助对不起,所以我必须随机为他们分配一个url?例如,在该仪表板行中,它如何知道去哪里?我是否应该先导入组件,然后在Navlink中像component={Dashboard}一样使用它,然后再导入到='/Dashboard'?我不会说“random”。您可以选择表示youir应用程序导航的URL路径。您希望哪个URL表示HRPanel
的视图?您希望为CreateJob
表示什么URL?例如,如果这是一个博客,您可能会有路径/posts
和/posts/:id
。这完全取决于您希望导航的外观。您好,谢谢您的回答,很抱歉再次问一个问题,但您也能看看这个新问题吗?对不起,所以我必须随机给他们分配一个url?例如,在该仪表板行中,它如何知道去哪里?我是否应该先导入组件,然后在Navlink中像component={Dashboard}一样使用它,然后再导入到='/Dashboard'?我不会说“random”。您可以选择表示youir应用程序导航的URL路径。您希望哪个URL表示HRPanel
的视图?您希望为CreateJob
表示什么URL?例如,如果这是一个博客,您可能会有路径/posts
和/posts/:id
。这完全取决于您希望导航的外观。您好,谢谢您的回答,很抱歉再次问一个问题,但您也能看看这个新问题吗?