Блог

Я закодировал приложение с четырьмя различными типами пользователей, и мои запросы api фильтруются только для отображения данных на основе прав доступа пользователя. Переходя к интерфейсной части как новичок в react, я подумал, что было бы лучше разделить мои боковые панели, чтобы избежать ошибок, связанных с доступом пользователей к макету, который они не должны видеть. У каждой боковой панели есть стили, которые управляют отображением данных, поэтому мне пришлось объявлять маршруты в отдельных файлах на основе боковой панели. Проблема в том, что когда я пытаюсь получить доступ к URL-ссылкам в этих боковых панелях, это дает мне пустые страницы. Ниже приведен мой код, и я прошу кого-нибудь любезно объяснить мне, где я ошибаюсь и где я должен измениться, поскольку это доставляет мне слишком много головной боли.

  <div className={classNames(classes.container, !navDrawerOpen amp;amp; classes.containerFull)}>
          <Switch>
            <Route path="/ts" component={Dashboard} />
            <Route  path="/dashboard" component={Dashboard} />
            <Route  path="/form" component={Form} />
            <Route  path="/table/basic" component={BasicTable} />
            <Route  path="/table/data" component={DataTable} />
            <Route component={NotFound} />
          </Switch>
        </div>
 

Это мои маршруты на боковой панели или панели управления преподавателем

 <div className={classNames(classes.container, !navDrawerOpen amp;amp; classes.containerFull)}>
          <Switch>
            <Route exact path="/sm" component={Dashboard} />
            <Route path="/smdashboard" component={Dashboard} />
            <Route path="/smform" component={Form} />
            <Route path="/smtable/basic" component={BasicTable} />
            <Route path="/smtable/data" component={DataTable} />
            <Route component={NotFound} />
          </Switch>
        </div>
 

это мои маршруты на боковой панели 2

 
const AppLayoutRoute = ({ component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={matchProps => (
          <Component {...matchProps} />
      )}
    />
  );
};


export default (
  <Router>
    <Switch>
      <AppLayoutRoute exact path="/sm" component={StationManager} />
      <AppLayoutRoute exact path="/" component={App} />
    </Switch>
  </Router>
);


 

и в последнем файле я пытаюсь подключить свои маршруты к маршрутизатору. Что касается маршрута AppLayout, я думал, что это поможет мне, по крайней мере, получить доступ к этим дочерним маршрутам, и, честно говоря, я пытался реализовать решения, которые я читал в Интернете, и я все еще не могу понять, что мне делать

проверьте этот codepen.

Кроме того, для вашей логики; когда вы получаете пользовательские данные, я предполагаю, что они включают тип пользователя (например, учитель, ученик, администратор). Вы должны добавить эти данные в свое состояние. Затем вы используете это для условного отображения панели мониторинга на домашней странице. Итак, вы могли бы передать что-то вроде <Home type={state.user.type} />

 const { BrowserRouter, Route, Link } = ReactRouterDOM

const BasicExample = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link exact to="/">Home</Link></li>
        <li><Link exact to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" render={() => <Home type={'teacher'} />} />
      <Route exact path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </BrowserRouter>
)

const Home = (props) => {
  return(
    <div>
      <h2>{props.type ? props.type: 'none'}</h2>
    </div>
  )
}

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

ReactDOM.render(<BasicExample />, document.getElementById('root'))

<div id="root"></div>