时间戳

首页 > 解决方案 > React 路由器 - 私有路由

reactjs - React 路由器 - 私有路由

问题描述

function App() {

  const view = useSelector(viewsSelector);

  const isAuth = () => {
    if(view === ''){
        return false;
    }
    if(view === 'welcome'){
        return true;
    }
}

  console.log(isAuth());

  const PrivateRoute = ({component: Component, ...rest}) => {
  return(
      <Route {...rest} render={(props) => (
        isAuth()
          ? <Component {...props}/>
          : <Redirect to='/Login'/>
      )}/>
   )
  }
  
  return(
    <Router>
      <Header/>
        <Switch>
          <Route exact path='/Login' component={Login}/>
          <Route path='/About' component={About}/>
          <Route path='/Contact' component={Contact}/>
          <Route path='/Help' component={Help}/>
          <PrivateRoute path='/Welcome' component={Welcome}/>
        </Switch>
    </Router>
  )

}

我正在使用私人或受保护的路线。

isAuth()工作时false你不能去任何地方，除了Login

但从toisAuth()更改，它不会将路由重定向到falsetruepath='./Welcome

更改时如何重定向它isAuth()？

标签： reactjsreact-router

解决方案

您需要将isAuth结果传递给PrivateRoute，否则它将不知道何时isAuth更改。

function App() {
    const view = useSelector(viewsSelector);

    const isAuth = () => {
        if (view === "") {
            return false;
        }
        if (view === "welcome") {
            return true;
        }
    };

    console.log(isAuth());

    const PrivateRoute = ({ component: Component, canView, ...rest }) => {
        return (
            <Route
                {...rest}
                render={(props) =>
                    canView ? <Component {...props} /> : <Redirect to="/Login" />
                }
            />
        );
    };

    return (
        <Router>
            <Header />
            <Switch>
                <Route exact path="/Login" component={Login} />
                <Route path="/About" component={About} />
                <Route path="/Contact" component={Contact} />
                <Route path="/Help" component={Help} />
                <PrivateRoute path="/Welcome" component={Welcome} canView={isAuth()} />
            </Switch>
        </Router>
    );
}

推荐阅读