Как предотвратить перезагрузку текущей страницы и перейти на домашнюю страницу в React?
Я хочу перенаправить на домашнюю страницу с каждой страницы моего приложения. Поэтому я добавляю следующий код:
<Switch>
<Route path = "/login" component = {Login} />
<Route path = "/otp" component = {Otp} />
<Layout>
<Suspense fallback = {<LayoutSplashScreen />}>
<Redirect push to = "/homePage" />
<ContentRoute
path = "/homePage"
component = {RequestTabel}
children = {undefined}
render = {undefined}
/>
<ContentRoute
path = "/Register"
component = {RegisterPage}
children = {undefined}
render = {undefined}
/>
.
.
.
</Layout>
</Switch>
Теперь, когда я обновляю каждую страницу, я перехожу на домашнюю страницу, но текущая страница перезагружается, и после этого приложение переходит на домашнюю страницу. Я не знаю, почему, и я хочу проверить это. Я много искал и могу найти ссылку ниже, но мне нужно добавить ее на все мои страницы в приложении, и я думаю, что это неправильное решение.
if (performance.navigation.type === 1) {
// page was just refreshed:
window.location.href = '/homePage';
}
Я добавляю другие части связанного кода к моему вопросу:
маршруты.tsx
export default function Routes() {
return (
<Switch>
<HashRouter>
<BasePage />
</HashRouter>
</Switch>
);
}
BasePage — это приведенный выше код, который я написал первым.
Ответы 2
Ваш макет просто существует, каждый раз вызывая Redirect.
Я не уверен, какую библиотеку маршрутизации вы используете. Если это react-router-dom, взгляните на их документацию по маршрутизации макетов. TL; DR (хотя вы обязательно должны прочитать) заключается в том, что все в маршрутизаторе должно быть внутри Route, у вас не может быть таких бесплатных вещей.
Если это какая-то другая библиотека, например TanStack Router, попробуйте найти их определение маршрутизации.
В нынешнем виде ваш компонент Redirect всегда вызывается, поэтому вас всегда перенаправляют. Это должно быть обусловлено в маршруте.
Я не понимаю, что здесь означает перезарядка. Вы либо загружаете текущую страницу, либо перенаправляете с нее, у вас не может быть и того, и другого, одновременно может быть активной только одна страница. Возможно, если бы вы добавили в вопрос больше деталей, например, какую библиотеку вы используете и что должно вызывать перенаправление, это было бы полезно.
Я использовал библиотеку react-router-dom. reload означает, что пользователь нажимает F5 в браузере и хочет перезагрузить страницу. В этой ситуации я хочу перейти на домашнюю страницу, а не перезагрузить текущую страницу. но в моем коде текущая страница перезагружается и снова монтируется, а после этого переходит на домашнюю страницу. но я не знаю почему
@changeworld Теперь я понимаю, что ты имеешь в виду. В вашем useEffect у вас есть «домашняя страница» с ошибкой, вы используете «домашнюю страницу» везде. Может ли это быть проблемой? Если нет, попробуйте вместо этого использовать useLayoutEffect.
Код безоговорочно отображает компонент Redirect. Если вы хотите, чтобы "/homepage" был своего рода маршрутом «по умолчанию», то вложенные маршруты внутри Layout/Suspense также должны быть обернуты в Switch (внешний Switch уже будет сопоставляться и рендериться Layout), а Redirect переместить в конец Switch в качестве универсального маршрута для перенаправления пользователей на "/homepage", если они не пытались получить доступ к какому-либо другому маршруту.
Пример:
<Switch>
<Route path = "/login" component = {Login} />
<Route path = "/otp" component = {Otp} />
<Layout>
<Suspense fallback = {<LayoutSplashScreen />}>
<Switch>
<ContentRoute path = "/homePage" component = {RequestTabel} />
<ContentRoute path = "/Register" component = {RegisterPage} />
...
...
...
<Redirect push to = "/homePage" />
</Switch>
</Suspense>
</Layout>
</Switch>
Если вы хотите, чтобы приложение перенаправляло на "/homepage" при монтировании, добавьте хук useEffect к первому компоненту под маршрутизатором и выполните императивное перенаправление.
Пример:
import { useHistory } from 'react-router-dom';
const App = () => {
const history = useHistory();
React.useEffect(() => {
history.replace("/homepage");
}, []);
... rest of the component code
};
<BrowserRouter>
<App />
</BrowserRouter>
Спасибо @Drew Reese, но с вашим кодом приложение не переходит на домашнюю страницу при перезагрузке каждой страницы. Я хочу перейти на домашнюю страницу вместо перезагрузки текущей страницы. но в моем коде текущая страница перезагружается и снова монтируется, а после этого переходит на домашнюю страницу. но я не знаю почему. Извините, если мой английский слаб и, возможно, я не могу донести свою точку зрения.
@changeworld Можете ли вы уточнить, что вы подразумеваете под «приложение не переходит на домашнюю страницу при перезагрузке каждой страницы»? Вы говорите, что если вы переходите к "/homepage" или любому другому пути, у вас нет маршрута, для которого компонент RequestTabel не отображается? Какое отношение загрузка/перезагрузка страницы имеет к отображению домашней страницы? Возможно, мы не понимаем вашу проблему или вариант использования. Пожалуйста, попробуйте уточнить.
@changeworld Хорошо, я прочитал ваш комментарий к другому ответу. Что именно делает ваш код, который перенаправляет на домашнюю страницу? Пожалуйста, отредактируйте свой пост и предоставьте более полный минимально воспроизводимый пример, который включает корневое приложение и маршрутизатор, маршруты, код компонента, выполняющий перенаправление, и любой соответствующий код между ними, который может иметь отношение к проблеме/вопросу.
Спасибо @Дрю Риз. У меня есть приведенный выше код в basePage, и у меня нет других кодов для обработки перенаправления на домашнюю страницу. Итак, теперь, когда я нажимаю F5, приложение перезагружает текущую страницу (например, страницу A, с помощью отладчика я сначала вижу начальную страницу A), а затем, закончив ее, переходит на домашнюю страницу.
@changeworld Если у вас нет другого кода для обработки перенаправления на домашнюю страницу, то что же делает переход на домашнюю страницу при загрузке/перезагрузке приложения? Что такое basePage или pageA?
Я добавил к моему вопросу другие части связанного кода. basePage управляет маршрутизацией между компонентами. pageA означает что-то вроде Register page или что-то в этом роде. Это всего лишь пример. и <Redirect to = "/homePage" /> над Layout дескриптором для перенаправления на homePage
@changeworld До сих пор неясно, что и где делает ваш код, но я обновил свой ответ, указав, что я предлагаю делать, если вы хотите выполнить действие перенаправления при монтировании кода приложения.
Спасибо @Ронни Эфрони. Я думаю, вы не можете понять мой вопрос. Я хочу перенаправить на домашнюю страницу, и он делает это правильно, но перед перенаправлением на домашнюю страницу перезагрузите текущую страницу, и я не знаю, почему текущая страница сначала перезагружается, а затем переходит на домашнюю страницу.