Возникла проблема с маршрутом на нескольких пользовательских панелях управления в React Js
Я закодировал приложение с четырьмя разными типами пользователей, и мои запросы API фильтруются только для отображения данных на основе прав доступа пользователя. Переходя к интерфейсной части как новичок в React, я подумал, что было бы лучше отделить мои боковые панели, чтобы избежать ошибок, связанных с доступом пользователей к макету, который они не должны видеть. Каждая боковая панель имеет стили, управляющие отображением данных, поэтому мне пришлось объявить маршруты в отдельных файлах на основе боковой панели. Проблема в том, что когда я пытаюсь получить доступ к URL-ссылкам на этих боковых панелях, это дает мне пустые страницы. Ниже приведен мой код, и я прошу кого-нибудь любезно объяснить мне, где я ошибаюсь и где я должен измениться, поскольку это вызывает у меня слишком много головной боли.
<div className = {classNames(classes.container, !navDrawerOpen && 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 && 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 Route, я думал, что это поможет мне, по крайней мере, получить доступ к этим дочерним маршрутам, и, честно говоря, я пытался реализовать решения, которые я читал в Интернете, и я до сих пор не могу понять, что я должен делать.
Спасибо, Mint, позвольте мне попробовать и посмотреть, можно ли управлять моей темой на обеих боковых панелях или что при использовании этого подхода.
Зачем вы тематизируете маршруты? Вы должны указать уважаемую страницу, на которую ведет маршрут. Вы должны разместить свой код на codepen или что-то в этом роде; вы бы лучше помогли.
Это очень хороший вопрос, я думаю, это связано с тем, что я упустил некоторые концепции всего этого. Потому что сначала я использовал шаблон администратора, в котором у меня были ссылки на боковой панели, и когда я нажимаю на ссылку, она загружает страницу, но страница полностью теряет боковую панель, и я использовал проблему, связанную с тем, что я объявлял эти маршруты в App.js. И в течение последней недели я пробовал этот новый подход, и он действительно запутал мой разум.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
проверить это 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>
Спасибо, чувак, за то, что уделил мне время, ты действительно открыл мне глаза
Я вернул свой код относительно того, как вы меня проинструктировали, и это приводит меня к моей предыдущей дилемме, я продолжаю терять боковую панель, когда я нажимаю ссылку навигации
у тебя есть репо? очень помогло бы увидеть код.
Спасибо Минт за помощь. Мой дизайн был тем, который плохо привел меня к этой задаче. Мне пришлось создать Layout с заголовком, боковой панелью и навигационными ссылками, заключенными в ящик боковой панели. Затем макет используется как оболочка для дочерних компонентов. Например, для студентов есть макет ученика, учителя, есть макет учителя, а навигационные ссылки разделены в соответствии с типами пользователей, и это хорошо работает для меня и служит моей цели на данный момент. Большое спасибо за помощь
Я не понимаю, что вы пытаетесь сделать. Я бы не стал разделять маршруты таким образом, а вместо этого имел бы один файл со всеми маршрутами и отображал бы ссылки на соответствующей боковой панели.