重定向后反应没有正确呈现布局

Question

我有一个使用 styled-components 和 material-ui 的应用程序。我根据用户角色配置了私有路由，如果用户未通过身份验证，我应该将他返回到登录页面。但是当这种情况发生时，布局不会加载。

App.tsx

import React from 'react';

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core';
import { Provider } from 'react-redux';
import { ToastContainer } from 'react-toastify';
import { PersistGate } from 'redux-persist/integration/react';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';

import Routes from './routes';
import { configureStore } from './store/configure-store';
import GlobalStyle from './styles/globalTheme';
import defaultTheme from './styles/theme/default.theme';

const { store, persistor } = configureStore();
const theme = createMuiTheme({});

function App() {
  return (
    <Provider store={store}>
      <MuiThemeProvider theme={theme}>
        <StyledThemeProvider theme={defaultTheme}>
          <PersistGate loading={null} persistor={persistor}>
            <GlobalStyle />
            <Routes />
            <ToastContainer />
          </PersistGate>
        </StyledThemeProvider>
      </MuiThemeProvider>
    </Provider>
  );
}

export default App;

routes.tsx

import React, { memo } from 'react';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import NotFound from '../components/NotFound';
import Dashboard from '../pages/Dashboard';
import Login from '../pages/Login';
import Register from '../pages/Register';
import { ProtectedRoute } from './permissions-route';

function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <ProtectedRoute
          path="/dashboard"
          component={Dashboard}
          requiredRole={['USER']}
        />
        <Route exact path="/" component={Login} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/cadastro" component={Register} />
        <Route exact path="/error" component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default memo(Routes);
 

permission-route.tsx

import React from 'react';

import { useSelector } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';

import { RootState } from '../store/configure-store';

interface Teste {
  path: any;
  component: any;
  render?: any;
  requiredRole: any;
}

export const ProtectedRoute = ({
  path,
  component: Component,
  render,
  requiredRole,
  ...rest
}: Teste) => {
  const userRole = useSelector((state: RootState) => state.user.role);
  return (
    <Route
      path={path}
      {...rest}
      render={(props) => {
        if (requiredRole.includes(userRole)) {
          return Component ? <Component {...props} /> : render(props);
        }

        return <Redirect to="/login" />;
      }}
    />
  );
};

export default ProtectedRoute;

重定向发生后会发生什么

Answer 1

派对迟到了，但其他人找到了这个答案。

我在使用 MUI 和路由器时遇到了类似的问题。我发现我在导入不同版本的MUI：@mui和@material-ui替换@material-ui组件并卸载后，问题解决了。

这很可能是样式冲突的问题。我建议检查浏览器 DevTools 以查看哪些文件/类覆盖了这些样式重定向后

Answer 2

不要返回<Redirect /> 组件，而是尝试window.location.href = "/login";

return (
  <Route
    path={path}
    {...rest}
    render={(props) => {
      if (requiredRole.includes(userRole)) {
        return Component ? <Component {...props} /> : render(props);
      }

      window.location.href = "/login";
    }}
  />
);

这应该刷新页面并使其再次获得正确的样式