Перенаправить изменяющийся URL-адрес страницы, но не отображать новую страницу
У меня есть страница, которая проверяет пользователя и перенаправляет его на страницу входа в систему, если проверка прошла успешно. Однако при использовании redirect URL-адрес изменяется, но новая страница для Login не отображается. Как я могу получить новую страницу для рендеринга?
App.js
var child;
render() {
if (this.state.toLogin && !this.state.mounted) {
<Route exact path = "/Login" component = {Login} />;
<Route exact strict path = "/" render = {({location}) => {
if (location.pathname === window.location.pathname) {
return <Redirect to = "/Login"/>;
}
return null;
}}
return(
<div className = "App">
<ReactCSSTransitionGroup
transitionName = "remove"
transitionEnterTimeout = {100}
transitionLeaveTimeout = {100}>
{child}
</ReactCSSTransitionGroup>
</div>
);
}
Index.js
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
Обновлено: внесены изменения в соответствии с ответами, но теперь URL-адрес не меняется, и страница не отображается
как присвоить значение var child? Можете ли вы показать полную кодовую базу App?
проверить мой ответ @black
Оказывается, я не рендерил вещи должным образом, но ценю все ответы
Если вы пришли к этому вопросу, потому что пытаетесь перенаправить на внешнюю страницу, мне помог этот вопрос: stackoverflow.com/questions/42914666/react-router-external-l ink /…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Вам необходимо удалить "точное" и "component = {Login}" компонента и добавить новый компонент <Route exact path = "/Login" component = {Login} />.
render() {
if (this.state.toLogin && !this.state.mounted) {
<Route exact path = "/Login" component = {Login} />
<Route exact strict path = "/" render = {({location}) => {
if (location.pathname === window.location.pathname) {
return <Redirect to = "/Login"/>;
}
return null;
}} />
}Удача!
Я попробовал внести изменения, но отрисовка страницы все еще не отображается. Я добавил App.js целиком на случай, если что-то мешает
Не делайте этого здесь, используйте свое промежуточное ПО для проверки подлинности, чтобы делать изменения в соответствии с авторизацией / правами.
Для работы Routes компонент, использующий Route, должен получить параметры Route.
В вашем случае компонент приложения, похоже, не получает параметры маршрута в качестве реквизита. Вы можете просто отобразить его как маршрут по умолчанию или использовать withRouter HOC, чтобы обернуть компонент приложения.
ReactDOM.render(
<BrowserRouter>
<Route component = {App} />
</BrowserRouter>,
document.getElementById('root')
);
Вы пропустили пару возвратов. Ваша функция рендеринга должна возвращать ваши маршруты, и ваши маршруты должны быть обернуты в какой-то элемент.
render() {
if (this.state.toLogin && !this.state.mounted) {
return (
<React.Fragment>
<Route exact path = "/Login" component = {Login} />
<Route exact strict path = "/" render = {({location}) => {
if (location.pathname === window.location.pathname) {
return <Redirect to = "/Login"/>;
}
return null;
}} />
</React.Fragment>
);
}
return //Something according to your logic
}
если вы используете react-router-dom, оберните экспорт компонентов в withRouter, предоставленный react-router-dom.
и все использование компонентов должно быть возвращено из рендеринга. тогда только React знает, что рендерить.
import React from 'react'
import { withRouter, Redirect } from 'react-router-dom';
class App extends React.Component {
render() {
if (this.state.toLogin && !this.state.mounted) {
return (
<React.Fragment>
<Route exact path = "/Login" component = {Login} />
<Route exact strict path = "/" render = {({location}) => {
if (location.pathname === window.location.pathname) {
return <Redirect to = "/Login"/>;
}
return null;
}} />
</React.Fragment>
);
}
return (
<div className = "App">
<ReactCSSTransitionGroup
transitionName = "remove"
transitionEnterTimeout = {100}
transitionLeaveTimeout = {100}>
{child}
</ReactCSSTransitionGroup>
</div>
)}
}
export default withRouter(App)
Несомненно, ваш ответ правильный. это тоже была моя чертова проблема, и withRouter мне помог. но я не знаю почему, почему withRouter HOC исправляет эту проблему?
@AngelHotxxx, я упомянул в своем ответе, почему withRouter решает проблему, вы можете это проверить
@AngelHotxxx для react-router-dom ему нужны некоторые реквизиты, связанные с маршрутизацией. которые используются для изменения маршрута браузера и добавления URL-адреса к объекту истории и т. д., которые предоставляются этим withRouter HOC
Похоже, ты не возвращаешь свои маршруты. Попробуйте переместить маршруты туда, где вы инициализируете маршрутизатор, и оберните их с помощью приложения:
<Router>
<Route component = {App}>
<Route exact path = "/Login" component = {Login} />;
<Route exact strict path = "/" render = {({location}) => {
if (location.pathname === window.location.pathname) {
return <Redirect to = "/Login"/>;
}
return null;
}/>
</Route>
</Router>
А затем в вашем компоненте приложения просто используйте дочерние элементы для отображения содержимого страницы:
render() {
return (
<div className = "App">
<ReactCSSTransitionGroup
transitionName = "remove"
transitionEnterTimeout = {100}
transitionLeaveTimeout = {100}
>
{this.props.children}
</ReactCSSTransitionGroup>
</div>
);
}
Убедитесь, что ключевые слова "component" и "path" в теге маршрута должны быть строчными буквами (вместо Component для Component