Question

我正在尝试根据答案here创建一条私有路由，但是它没有执行重定向。

这是我的私人路线组件

import React, { Component, useContext } from "react";
import { Redirect, Route, RouteComponentProps, RouteProps } from "react-router-dom";
import { RootStoreContext } from "../stores/rootStore";
import { observer } from "mobx-react-lite";

const PrivateRoute: React.FC<RouteProps> = ({ children, ...rest }) => {
    const rootStore = useContext(RootStoreContext);
    const { isAuthenticated } = rootStore.msalStore;

    return (
        <Route
            {...rest}
            render={(props: RouteComponentProps<{}>) =>
                isAuthenticated ? (
                    <Component {...props} />
                ) : (
                    <Redirect to={{ pathname: "/", state: { from: props.location } }} />
                )
            }
        />
    );
};

export default observer(PrivateRoute);

这是我的App.tsx

//Imports

const App: React.FC = () => {
    return (
        <>
            <BrowserRouter>
                <ThemeProvider theme={theme}>
                    <Route exact path="/" component={LoginPage} />
                    <Route path="/authcallback" component={AuthCallback} />
                    <PrivateRoute path="/home" component={HomePage} />
                </ThemeProvider>
            </BrowserRouter>
        </>
    );
};

export default App;

当我在浏览器中键入/home或创建一个导航到home的测试按钮时，即使isAuthenticated = false，它也会加载组件。

我知道它与我的mobx存储中的isAuthenticated的值无关，因为更改为const [isAuthenticated, setIsAuthenticated] = useState(false);也不起作用。我的应用程序中也没有其他路由实例。

这里可能是什么问题？

Answer 1

使用Switch（来自react-router-dom）包装路由，

import { Switch } from "react-router-dom";

const App: React.FC = () => {
    return (
        <>
            <BrowserRouter>
                <ThemeProvider theme={theme}>
                   <Switch>
                    <Route exact path="/" component={LoginPage} />
                    <Route path="/authcallback" component={AuthCallback} />
                    <PrivateRoute path="/home" component={HomePage} />
                   </Switch>
                </ThemeProvider>
            </BrowserRouter>
        </>
    );
};

export default App;

Answer 2

This的讨论对我有帮助

我的解决方案...

https://codesandbox.io/s/modest-fire-6mj3i?file=/src/PrivateRoute.tsx:0-517

import * as React from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";

import "./styles.css";

const Home: React.FC = () => {
  return <div>Home</div>;
};

const Login: React.FC = () => {
  return <div>Login</div>;
};

export default function App() {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to="/home">Home</Link>
        </li>
        <li>
          <Link to="/">Login</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={Login} />
        <PrivateRoute redirectPath="/login" path="/home" component={Home} />
      </Switch>
    </BrowserRouter>
  );
}

import { Redirect, Route, RouteProps } from "react-router";
import React, { useState } from "react";

export interface IPrivateRouteProps extends RouteProps {
  redirectPath: string;
}

const PrivateRoute: React.FC<IPrivateRouteProps> = (props) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return isAuthenticated ? (
    <Route {...props} component={props.component} render={undefined} />
  ) : (
    <Redirect to={{ pathname: props.redirectPath }} />
  );
};

export default PrivateRoute;

如果我单击Home，则会重定向到/login，并且Home组件被隐藏

useState仅用于从组件内部测试身份验证状态。

重定向不适用于反应路由器身份验证的路由

2 个答案: