реагирует маршрутизатор, изменяет ссылки URL, но не отображает компоненты

Question

Я создаю боковую навигационную систему в реагировании и хочу отображать связанный компонент в левой боковой части Sidenav, когда я нажимаю на его элементы. однако реагирующий маршрутизатор изменяет 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)

маршруты. 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

Приложение. 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

В чем проблема?

Answer 1

Вы указали путь опору для Route компонента неправильно. path - это не относительный путь к файлу компонента React, это URL-путь для сопоставления. Измените path во всех местах ваших компонентов / файлов, чтобы соответствовать URL-пути, а не пути к компоненту. Например, если вы хотите, чтобы HRPanel отображалось, когда пользователь переходит на /hr /, измените path для Route на <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 имеет неверный реквизит от до . to должен указывать URL-путь для перехода, а не относительный путь к компоненту. Это должно выглядеть так:

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

Надеюсь, это поможет