Возможно ли иметь несколько <Switch> в React.js?
Я создаю проект React без Redux.
Я бы хотел иметь два, а в данном случае 3 разных переключателя.
1st Switch сможет переключаться между домашней страницей (обычным веб-сайтом) и UserPage (Dashboard), когда пользователь вошел в систему ... Тогда каждый из них также будет переключателем, поэтому Home будет переключаться между компонентами Home, а UserPage будет переключаться между компонентами UserPage. Это вообще возможно?
Main Switcher
Home Page (Switch) Dashboard
Home About Contact, Careers My Profile, Courses, Classes, Donations...
Так должен выглядеть и структурироваться проект.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать столько компонентов Switch, сколько захотите. Он просто отображает первое совпадение всех маршрутов, указанных в нем.
Что-то в этом роде должно работать в вашем случае:
const Home = ({match}) => {
return(
<Switch>
<Route path = {match.url} exact = {true} component = {HomeDefaultComponent} />
<Route path = {`${match.url}/about`} exact = {true} component = {About} />
<Route path = {`${match.url}/contact`} exact = {true} component = {Contact} />
<Route path = {`${match.url}/careers`} exact = {true} component = {careers} />
</Switch>
);
};
const Dashboard = ({match}) => {
return(
<Switch>
<Route path = {match.url} exact = {true} component = {DashboardDefaultComponent} />
... other Dashboard paths like Home component above
</Switch>
);
};
const App = () => {
return(
<Switch>
<Route path='/home' component = {Home} />
<Route path='/dashboard' component = {Dashboard} />
</Switch>
);
}
Что ж, я нашел какое-то решение. Вместо '$ {match.url} / about' я использовал path = {match.url + '/ about'}, и он работает
Привет. Рад, что вам удалось заставить его работать. В моем коде я использую шаблонные литералы. Результат такой же, как и у вас. Если вы хотите узнать об этом больше, посмотрите это: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Ура! :)
Но еще один вопрос? <Route path = '/ home' component = {Home} />, если я удалю здесь '/ home' и поставлю только '/', ничего не будет работать. Что здесь должно быть?
Вы можете показать мне свой код? Не видя этого, я могу только догадываться. (1) если вы не передаете опору exact в свой маршрут, она совпадает со всем, что начинается с указанного пути. В этом случае все будет отображаться на этом маршруте, включая /dashboard. Чтобы исправить это, переместите маршрут панели управления над домашним маршрутом. (2) В маршрутах, определенных внутри Home, вы проверяете наличие match.url + /about. Поскольку match.url - это просто /, возможно, он пытается сопоставить //about. Чтобы исправить это, попробуйте удалить ведущий / из маршрутов.
Могу я связаться с кем-нибудь из ваших контактов, чтобы уточнить еще одну вещь, которую я забыл спросить. Теперь, когда у меня есть задний рендеринг компонентов, мне понадобится еще один заголовок (панель навигации) и другой компонент переключения. Например, чтобы иметь такие маршруты, как abc.com/dashboard/my-profile, abc.com/dashboard/payments и т. д. Если я попытаюсь сопоставить их так же, как и для этих двух, я получаю 'не могу получить URL-адрес неопределенный'
Вы можете поделиться своим кодом? Ссылка на github или пример на codeandbox?
Я также нашел это полезным: reactrouter.com/web/example/nesting
Не работает. Вы можете попробовать, и это то, что я пытался сделать, но это не сработало. Он не показывает ничего, кроме компонентов по умолчанию, которые передаются приложением const ...