React Router делает мое условно-аутентификационное представление перенаправленным даже при аутентификации?

Question

По сути, у меня есть страница в реакции-маршрутизаторе, которая доступна только в том случае, если пользователь авторизован (this.state.authorized). Если пользователь не авторизован, он перенаправляется на домашнюю страницу.

App.js
class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      authorized: false
    }

    this.handleLogin = this.handleLogin.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.rememberAuthorization = this.rememberAuthorization.bind(this);
  }

  rememberAuthorization() {

      // if the key exists in localStorage
      if (localStorage.hasOwnProperty("authorized")) {
        // get the key's value from localStorage
        let value = localStorage.getItem("authorized");

        // parse the localStorage string and setState
        try {
          value = JSON.parse(value);
          this.setState({ authorized: value });
        } catch (e) {
          // handle empty string
          this.setState({ authorized: value });
        }
      }

  }

  handleLogin(username, password) {
    if (username == "XXXX" && password == "XXXXXXXXXX") {
      console.log(this.state.authorized)
      this.setState({ authorized: true }, () => {
        console.log(this.state.authorized)
        localStorage.setItem("authorized", JSON.stringify(this.state.authorized))

      })

    }
    else {
      console.log("access denied")
    }

  }

  handleLogout() {
    this.setState({authorized: false}, () => {
      //console.log(this.state.authorized)
      localStorage.setItem("authorized", JSON.stringify(this.state.authorized))
      console.log(this.state.authorized)
    })
  }

  componentDidMount() {
    this.rememberAuthorization();
  }

  render() {



    return (
      <Router>
      <Route 
        exact path='/' render={(props) => 
         <Search isAuthed={this.state.authorized} handleLogout={this.handleLogout} handleLogin={this.handleLogin} {...props} />
      }
      />
      <Route 
        exact path='/upload' render={(props) => 
         <AddChar isAuthed={this.state.authorized} handleLogout={this.handleLogout} handleLogin={this.handleLogin} {...props} />
      }
      />
      <Route 
        exact path='/upload/success' render={(props) => 
         <UploadConfirmation isAuthed={this.state.authorized} handleLogout={this.handleLogout} handleLogin={this.handleLogin} {...props} />
        }
      />
        </div>
      </Router>
    );
  }
}

export default App;

this.state.authorized передается как реквизит на /upload, который является маршрутом, по которому авторизованный пользователь не может войти через URL-адрес, но может пройти по ссылке на домашней странице, которая доступна только для авторизованного пользователя. пользователи.

AddChar.js ("/upload")

render() {


    let loggedIn = this.props.isAuthed
    //localStorage.getItem("authorized");
    console.log(`the loggedIn is ${true}`);

    if (this.state.formSubmitted == true) {
        return (<Redirect to="/upload/success" />)
    }
    else if (loggedIn) {
        return (
            //The regular page              
        );
    } else {
        console.log(`you're being redirected. the loggedIn is ${loggedIn}`)
        return (<Redirect to="/" />) }

}

Когда я захожу на страницу через адресную строку браузера в браузере, я перенаправлен, и моя переменная loggedIn имеет значение true, тогда это false. Когда я захожу на страницу по ссылке на главном экране, console.log говорит, что loggedIn - это true. Почему я получаю этот результат? Я должен войти в систему постоянно, независимо от того, как я вхожу в просмотр страницы. проверка, если (loggedIn === true) в качестве условия для просмотра страницы перенаправляет меня, даже когда authorized: true. если я вышел из системы, я могу получить доступ к /upload через адресную строку URL. Почему первый цикл рендеринга страницы не распознает самое последнее значение пропущенного пропа?