Перенаправить изменение URL страницы, но не отображать новую страницу

Question

У меня есть страница, которая проверяет пользователя и перенаправляет его на страницу входа в систему, если проверка прошла успешно.Однако при использовании 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 не меняется и страница не отображается

Answer 1

Похоже, вы не возвращаете свои маршруты.Попробуйте переместить ваши маршруты в место, где вы инициализируете свой маршрутизатор, и оберните его приложением:

<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>
    );
  }

Answer 2

, если вы используете react-router-dom, оберните экспорт компонента в withRouter, предоставленный react-router-dom.

и все использование компонентов должно быть возвращено из рендера.только тогда реагировать знает что делать.

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)

Answer 3

Вы пропустили пару возвратов.Ваша функция рендеринга должна возвращать ваши маршруты, а ваши маршруты должны быть обернуты в некоторый элемент.

  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
}

Answer 4

Для того чтобы маршруты работали, компонент, использующий маршрут, должен получить параметры маршрута

В вашем случае компонент приложения не получает параметры маршрута в качестве реквизита.Вы можете просто отобразить его как Маршрут по умолчанию или использовать withRouter HOC, чтобы обернуть компонент приложения

ReactDOM.render(
  <BrowserRouter>
    <Route component={App} />
  </BrowserRouter>,
  document.getElementById('root')
);

Answer 5

Не делайте этого здесь, используйте ваше промежуточное программное обеспечение для аутентификации, чтобы делать указания в соответствии с авторизацией / правами.

Answer 6

Вам необходимо удалить «точный» и «компонент = {Логин}» компонента и добавить новый компонент <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;
  }} />
}

Удачи!