Reactjs — как перенаправить на домашнюю страницу по умолчанию
Я пытаюсь установить перенаправление на страницу по умолчанию, но не работает. как правильно это сделать?
const routes = [
{
path:"/",
component:Home,
extract:"true",
redirect:"/home"
},
{
path:"/home",
component:Home
},
{
path:"/service",
component:Service
}
];
HTML:
<div>
<Router>
<Header />
{routes.map((route) => (
<Route
key = {route.path}
path = {route.path}
component = {route.component}
/>
))}
</Router>
@buzatto - не повезло. страница не загружается, выдает ту же ошибку. но работает только целевая страница, когда я ставлю "/" вместо home
о, ваш <Header /> должен быть внутри на маршрутизаторе, чтобы ссылки на ваш маршрутизатор работали правильно
это сработало после перехода к заголовку. это была проблема с кешем. но при обновлении страницы не загружается..
По своей природе React был разработан для одностраничных приложений (SPA). По мере роста популярности были созданы такие библиотеки, как react-router, для имитации наличия нескольких страниц, но вы должны помнить, что на самом деле существует только одна конечная точка. Могу я спросить, почему вы обновляете страницу? Потому что большинство действий, которые запускают обновление (onSubmit, onClick и т. д.) на обычном веб-сайте, управляются React с использованием DOM без необходимости полного обновления страницы.
ты прав. но когда пользователь обновляется неправильно, как мы можем показать страницу по умолчанию, а не то, где он был. (в приложении есть только статическая страница)
Ответы 1
Предполагая, что вы используете react-router-dom, я вижу одну окончательную проблему с некоторыми дополнительными проблемами. Возможно, вам потребуется внести только одно изменение, но я бы посоветовал просмотреть остальную часть вашего кода, чтобы обеспечить наилучшую конфигурацию маршрутизации.
Основная проблема: вам нужно добавить перенаправление на '/home', если вы хотите, чтобы этот компонент загружался первой страницей. Это связано с тем, что при рендеринге приложение видит путь по умолчанию как '/'.
<Redirect exact from = "/" to = "/home" />
<Route path = "/home">
<Home />
</Route>
Хотя это может решить вашу проблему само по себе, вот более комплексное решение, которое должно быть полезно для сравнения с вашим текущим кодом.
import {
BrowserRouter as Router,
Switch,
Route,
Redirect
} from "react-router-dom";
import home from "./Home";
import service from "./Service";
import header from "./Header";
function App () {
return (
<div>
<Router>
<Header />
<hr />
<Switch>
<Redirect exact from = "/" to = "/home" />
<Route path = "/home">
<Home />
</Route>
<Route exact path = "/service">
<Service />
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
Как видите, я бы рекомендовал переместить заголовок за пределы оператора Switch, а затем применить перенаправление с / на /home.
Также обратите внимание, что эта конфигурация является просто примером. Он изображает ситуацию, когда вы экспортируете App как компонент и не учитываете авторизацию входа, поэтому некоторые аспекты вашего кода могут отличаться.
После сборки (в настоящее время все статические страницы) я загружаюсь на сервер chrome, пока я обновляю, но страница не загружается. получить как entry not found: /home как это исправить? Но все отлично работает с локальным хостом
Можете ли вы уточнить, что вы имели в виду под хром-сервером? Какую платформу хостинга вы используете?
Я использую встроенный сервер Chrome, "127.0.0.1:8887" - он загружается отсюда. иначе представьте, что я использую экспресс, как с этим справиться?
Я лично никогда не использовал этот сервер, поэтому я не уверен в конфигурации. Однако то, что вы описываете, вероятно, вызвано отсутствием маршрутизатора на стороне сервера (экспресс и т. д.). Есть несколько способов справиться с этим, но, по моему опыту, при использовании HashRouter или BrowserRouter обычно помогает запустить так называемый «маршрутизатор с подстановочными знаками» или «маршрутизатор сервера» на бэкэнде. Вот статья для справки.
Вы пытались объявить свой маршрут с косой чертой
path = "/home"?