如何保护与React Router v5中的兄弟路由分开的单个路由?

时间:2020-02-27 17:25:18

标签: javascript reactjs react-router react-router-dom

我已经构建了ProtectedRouteWrapper并将其包裹在我要保护的路线周围-/path/:params

但是,我也有一个使用参数设置的路由- <Switch> <ProtectedRouteWrapper scope='protected'> <Route path={`${path}/protected`}> {this.props.isFetching ? (<Spinner />) : ( <> <HeaderContainer displayName={this.state.displayName} isLoggedIn={this.props.isSignedIn} /> <ProtectedContainer state={this.props.state} onReturnPath={this.props.onReturnPath} returnPath={this.props.returnPath} sessionData={this.props.sessionData} /> </> )} </Route> </ProtectedRouteWrapper> <Route path={`${path}/:params`}> {this.props.isFetching ? (<Spinner />) : ( <> <HeaderContainer displayName={this.state.displayName} isLoggedIn={this.props.isSignedIn} /> <LayoutContainer displayName={this.state.displayName} {...this.props} /> </> )} </Route> </Switch> ,即使我没有围绕该路由的包装,它也受到保护。

有人知道如何解决此问题吗?

Container.jsx

const ProtectedRouteWrapper = ({ children, scope, ...rest }) => {
  const isSignedIn = useSelector(state => state.session.userData.signed_in);

  return (
    <Route
      {...rest}
      render={({ location }) =>
        isSignedIn === true ? ( children ) : <LoginContainer scope={scope} />
      }
    />
  );
};

受保护的RouteWrapper.jsx

def infer(s):
    try:
        s = float(s)
        if s // 1 == s:
            return int(s)
        return s
    except ValueError:
        return s

0 个答案:

没有答案