Блог

Почему мой коммутатор реагирует на то, что маршрутизатор dom не обновляет представление при изменении маршрута ? Для этого я использую react-router-dom. Теперь я создал частный маршрут промежуточного программного обеспечения для проверки пользователя, если пользователь получает доступ к частному маршруту без токена, то пользователь перенаправится обратно на вход, это работает правильно, однако представление не меняется обратно на вход, когда URL изменился, я не знаю, в чем проблема.

Вот мой App.js

     const App = () => {

  let user = useSelector(selectUser); 
 

  return (
    
    <Router>

    <div className="App" >
          <Switch>

            <Route exact path="/login" component={Login} />
            
            <Route exact path="/index.html" component={() => (<Redirect to='/' />)} />

            <MainLayout userProfile={user}>

              <ProtectedRoute path="/dashboard" exact component={Dashboard} />

              <ProtectedRoute path="/customer_payor" exact component={CustomerPayor} />
              
              <ProtectedRoute path="/bank" exact component={Bank} />
              
              <ProtectedRoute path="/check_in_remarks" exact component={CheckInRemarks} />
              
              <ProtectedRoute path="/bank_account" exact component={BankAccount} />
              
              <ProtectedRoute path="/user_list" exact component={UserList} />
              
              <ProtectedRoute path="/access_right" exact component={AccessRight} />
            
              <ProtectedRoute path="/receive_check" exact component={ReceiveCheck} />
            
              <ProtectedRoute path="/move_check" exact component={MoveCheck} />
             
              <ProtectedRoute path="/deposit_check" exact component={DepositCheck} />
         
              <ProtectedRoute path="/exchange_check" exact component={ExchangeCheck} />

            </MainLayout>

            <Route path="*" component={NotFound} />

          </Switch>

        

    </div>
    </Router>
  );
}

export default App;
 

Защищенный Маршрут:

     import React,{useEffect} from 'react'
import { Redirect, Route, useHistory, useLocation } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { selectUser, login, logout } from '../features/userSlice';


const ProtectedRoute = ({component: Component, ...rest}) => {

    let {loggedIn} = useSelector((state) => state.user.login);

    let history = useHistory();
    
    if(loggedIn) {
        history.push('/dashboard')
    }else {
        history.push('/login');
    }

    useEffect(() => {
        !loggedIn amp;amp; localStorage.getItem('token')
    },[loggedIn])

    return (
        <Route
          {...rest}
          render={(props) => {
            if(localStorage.getItem('token')) {
                return <Component {...props} />;
            }else {
                return <Redirect to={{ pathname: '/login', state: { from: props.location} }} />
            }
          }}
        />
    );
}

export default ProtectedRoute
 

As you can see the route change to the /login but the view is not back to login.