React Router-Auth檢查呈現空白頁

Question

我是React Router的新手。 我正在嘗試按以下答案運行應用程序時執行Auth檢查： 如何在React Router 4中實現經過身份驗證的路由？ 。 如果登錄，則應加載儀表板組件，否則應重定向到登錄屏幕。

重定向不起作用，它只是一個空白頁。

有任何想法嗎？

export default class App extends React.Component {
  state = {
    auth: false
  };

  updateAuth = value => {
    this.setState({
      auth: value
    });
  };

  render() {
    const { auth } = this.state;
    console.log(auth);

    const PrivateRoute = ({ component: Component, ...rest }) => {
      return (
        <Route
          {...rest}
          render={props =>
            auth ? (
              <Component {...rest} />
            ) : (
              <Redirect
                to={{ pathname: "/login", state: { from: props.location } }}
              />
            )
          }
        />
      );
    };

    return (
      <Router>
        <div>
          <Route path="/login" component={Login} auth={this.updateAuth} />
          <PrivateRoute path="/dashboard" component={Dashboard} />
        </div>
      </Router>
    );
  }
}

https://codesandbox.io/s/rj6pqkw7xq

Answer 1

您仍然將PrivateRoute上的path屬性設置為/dashboard ，如果轉到https://qlj5rnnlnq.codesandbox.io/dashboard，它將嘗試加載您的Dashboard頁面，但是失敗，因為服務器上的文件沒有具有.js文件擴展名。

如果要從根URL轉到儀表板頁面，請將路徑更改為：

<PrivateRoute authed={true} path="/" component={Dashboard} />

並更改Dashboard文件上的文件擴展名，使其成為Dashboard.js