React js重定向功能答案

【问题标题】：React js Redirect FunctionReact js重定向功能
【发布时间】：2021-02-12 07:20:35
【问题描述】：

我正在为我的 React js 项目使用 firebase 身份验证。 Aim - 当用户转到路径 - '/home' 时，它应该检查用户是否登录。如果未登录，则重定向到路径 - '/' ，否则呈现组件“Home”。但是，当我运行代码时，函数工作正常，但组件没有呈现在屏幕上。
App.js 代码 -

function App() {
var users;

  function checkUserLoggedIn() {
    firebase.auth().onAuthStateChanged(function (user) {
      users = user;
      console.log(users);
      users ? <Home /> : <Redirect to="/" />;
    });
  }

  return (
    <div className="app">
      <Router>
        <Switch>
          <Route exact path="/">
            <Welcome />
          </Route>
          <Route path="/home">{checkUserLoggedIn()}</Route>
        </Switch>
      </Router>
    </div>
  );
}

知道为什么这不起作用吗？谢谢！

【问题讨论】：

在 React 中，渲染函数是 100% 同步的，因此无法在异步回调中返回可渲染的 JSX。您也不会从 checkUserLoggedIn 或 firebase 回调返回任何内容。
谢谢！有没有其他方法可以实现？
通常您会将身份验证检查/条件抽象到受保护的路由组件中，该组件要么呈现您想要的组件，要么将您弹回。检查auth workflow 示例。

标签： javascript reactjs react-router-dom

【解决方案1】：

创建字典文件路径并添加三个文件

index.js
publicRoute.js
privateRoute.js

在 index.js 中

/// index.js

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import PrivateRoutes from './PrivateRoutes'
import PublicRoutes from './PublicRoutes';

function Routes() {
    const { pathname } = useLocation();
    const[isUserLoggedIn, setLoggedIn] = React.useState(false)

    useEffect(() => {
      firebase.auth().onAuthStateChanged(function (user) {
      users = user;
      if(users){
        setLoggedIn(true)
        }
    }, [pathname]);
    

    return isUserLoggedIn ? <PrivateRoutes /> : <PublicRoutes />;

   

}

export default Routes;

在 publicRoutes.js 中

// publicRoute.js

import React, { Component } from 'react';
import { HashRouter, Redirect, Route, Switch } from 'react-router-dom';

const loading = (
  <div className="pt-3 text-center">
    <div className="sk-spinner sk-spinner-pulse"></div>
  </div>
)


// Pages
const Login = React.lazy(() => import('../views/pages/login/Login'));
const Register = React.lazy(() => import('../views/pages/register/Register'));


class PublicRoutes extends Component {

  render() {
    return (
      <HashRouter>
          <React.Suspense fallback={loading}>
            <Switch>
            <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
            <Route path="/login" name="Login Page" render={props => <Login {...props}/>} />
            <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
            <Redirect to='/login' />
            </Switch>
          </React.Suspense>
      </HashRouter>
    );
  }
}

export default PublicRoutes;

在私人路线中

/// privateRoute.js

import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import '../scss/style.scss';

const loading = (
  <div className="pt-3 text-center">
    <div className="sk-spinner sk-spinner-pulse"></div>
  </div>
)

// Containers
const TheLayout = React.lazy(() => import('../containers/TheLayout'));

// Pages
const Page404 = React.lazy(() => import('../views/pages/page404/Page404'));
const Page500 = React.lazy(() => import('../views/pages/page500/Page500'));

class PrivateRoutes extends Component {

  render() {
    return (
      <HashRouter>
          <React.Suspense fallback={loading}>
            <Switch>
              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
              <Route path="/" name="Home" render={props => <TheLayout {...props}/>} />
            </Switch>
          </React.Suspense>
      </HashRouter>
    );
  }
}

export default PrivateRoutes;

【讨论】：