时间戳

首页 > 解决方案 > React js重定向功能

javascript - React js重定向功能

问题描述

我正在为我的 React js 项目使用 firebase auth。目标- 当用户进入路径 - '/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>
  );
}

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

标签： javascriptreactjsreact-router-dom

解决方案

创建一个Dictionary文件路由并添加三个文件

  • index.js
  • publicRoute.js
  • 私有路由.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;

推荐阅读