反应路由器更改链接网址但不显示组件

Posted 2023-02-22

【中文标题】反应路由器更改链接网址但不显示组件

【英文标题】：react router changes links url but doesnt display the components

【发布时间】：2020-07-21 03:37:32

【问题描述】：

我正在设计一个侧导航，当我点击它的项目时，我想在侧导航的左侧部分显示一个相关的组件。但是，react router 会更改 url，但不会显示该部分中的组件。这是我的代码：

Sidenav.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)

routes.js

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

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

App.js

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

似乎是什么问题？

【参考方案1】：

您为 Route 组件指定的 path 属性不正确。 path 不是 React 组件文件的相对文件路径，而是要匹配的 URL 路径。将组件/文件的所有位置中的 path 更改为要匹配的 URL 路径，而不是组件的路径。例如，如果您希望在用户导航到 /hr 时显示 HRPanel/ 将 Route 的 path 更改为 <Route exact path='/hr' component=HRPanel />。 App.js 可能类似于：

  <Switch>
    <Route exact path='/' component=Login />
    <Route exact path='/hr' component=HRPanel />
    <Route exact path='/jobs/create' component=CreateJob /> />
// ... remaining paths
  </Switch>

Link 的 prop to 也以同样的方式不正确。 to 应该指定要导航到的 URL 路径，而不是组件的相对路径。它应该看起来像：

<Link style=color:'lightblue' to='/dashboard'>داشبورد</Link>

希望对你有帮助

【讨论】：

对不起，我得给他们随机分配一个url？例如，在那个仪表板行中，它怎么知道去哪里？我应该先导入组件，然后像 Navlink 中的 Component=Dashboard 一样使用它，然后再使用 to='/dashboard'？

我不会说“随机”。您将选择代表您的应用程序导航的 URL 路径。你想用哪个 URL 来表示 HRPanel 的视图？您想为CreateJob 表示哪个 URL？例如，如果这是一个博客，您可能会有路径/posts 和/posts/:id。这完全取决于您希望导航的外观。

您好，感谢您的回答，很抱歉再次提出问题，但请您也看看这个新问题吗？ ***.com/q/61139486/11675642