Отрисовывается только первая страница react-route
это мое второе использование stackflow, так что извините, если что-то непонятно, я создаю проект React, и когда я ставлю рут, рендерится только первая страница, и не более, мой сайт практически One Page, только одна страница не является страницей «О странице».
App.js
const App = () => {
return (
<>
<Routes>
<Route index path = "/" element = {<Home />} />
<Route exact path = "/Cardapio" element = {<Cardapio />} />
<Route exact path = "/Knowmore" element = {<Knowmore />} />
<Route exact path = "/About" element = {<About />} />
<Route path = "*" element = {<p>Página não encontrada</p>} />
</Routes>
</>
);
};
export default App;
Я хочу, чтобы отображались все страницы, так как это практически Одна страница, я просто хочу прокрутить вниз, чтобы перейти к сеансам, но в последнем сеансе под названием «Знать больше» есть кнопка, на этой кнопке, когда я нажимаю, я хочу открыть новую страница, которая будет «О программе», я уже использую useNavigate для кнопки и цели _Blank, проблема в том, что она отображает только первую страницу маршрута, то есть «Главную».
Затем все компоненты, которые вы хотите на одной «странице», должны отображаться на одном и том же маршруте. Используйте необработанные теги привязки для ссылки на хэш-идентификаторы на странице.
Не могли бы вы показать мне, как это сделать?
Какая у вас версия реакции?
реагировать версии 18.2.0
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Попробуйте обернуть содержимое тегом <BrowserRouter>.
Если бы OP не отображал маршруты в компоненте маршрутизатора, они, вероятно, спрашивали бы о множестве инвариантных ошибок. Вместо этого маршруты отображают контент, но не тот контент, который хочет OP. Я не верю, что это проблема.
Попробуй это
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route index element = {<Home />} />
<Route path = "Cardapio" element = {<Cardapio />} />
<Route path = "Knowmore" element = {<Knowmore />} />
<Route path = "About" element = {<About/>} />
<Route path = "*" element = {<NoPage />} />
</Routes>
</BrowserRouter>
);
}
если это не работает, пожалуйста, дайте мне знать. Это может быть связано с версией реакции v17 или v18.
показывает это: «Вы не можете визуализировать <Router> внутри другого <Router>. В вашем приложении никогда не должно быть более одного».
Как я указал в одном из других ответов, если бы в OP отсутствовал маршрутизатор, было бы множество инвариантных ошибок.
Если вы хотите визуализировать несколько компонентов вместе по одному маршруту, все они должны быть объединены и объединены по одному и тому же пути.
Пример:
<Routes>
<Route
path = "/"
element = {
<>
<Home />
<Cardapio />
<Knowmore />
</>
}
/>
<Route path = "/About" element = {<About />} />
<Route path = "*" element = {<p>Página não encontrada</p>} />
</Routes>
Если вы хотите связать отдельные компоненты, например, home, cardapio и другие «разделы», назначьте им соответствующие атрибуты элемента id и нацельте на них визуализированные необработанные теги привязки.
Основной пример:
const Home = () => (
<div id = "home">
Home
</div>
);
const Cardapio = () => (
<div id = "cardapio">
Cardapio
</div>
);
const Knowmore = () => (
<div id = "knowmore">
Knowmore
</div>
);
Навигационные ссылки в App:
<nav>
<ul>
<li>
<a href = "#home">Home</a>
</li>
<li>
<a href = "#cardapio">Cardapio</a>
</li>
<li>
<a href = "#knowmore">Know More</a>
</li>
<li>
<Link to = "/about">About</Link>
</li>
</ul>
</nav>
Я вижу 4 явных индивидуальных маршрута и 5-й универсальный маршрут. Все они должны отображаться индивидуально, когда их пути совпадают. Что вы ожидаете отрендерить и когда? Вы говорите, что когда вы переходите к другим маршрутам, пользовательский интерфейс не обновляется?