Question

我在应用程序中使用打字稿，React和ReactRouter。

我想实现一个AdminRoute组件，该组件仅在用户具有特定授权级别时才呈现，否则进行重定向（或显示“拒绝访问”消息）。如果我直接在我的App组件中实现逻辑，则一切正常。

但是，如果我创建了AdminRoute组件并在App中使用它，则首先完全不呈现它（使用Link元素重定向时）。但是，刷新页面后，无论当前URL如何，页面始终在当前路径的组件下方呈现。

我的代码：

应用组件：

const App: React.SFC<{}>  = (
  <div>
    <BrowserRouter>
       <>
         <Route render={props => <Header {...props} />} />
         <Route exact path="/" component={Main} />{' '}
         <Route exact path="/login" render={prop=>this.loginRedirect(props)}/>
         <Route exact path="/register" render={props => <Register {...props} />} />
         <Route exact path="/user" component={UserCard} />


         <AdminRoute exact path="/adminSettings" component={RestrictedSettings} />

         {/*<Route 
              exact path="/adminSettings" 
              render={props => store.user && 
                store.isAuthorized(UserRoles.Admin) 
                  ? <RestrictedSettings /> 
                  : <h2>Access denied</h2>
              }
            />
         */}

      </>
    </BrowserRouter>
  </div>
);

注释掉的代码有效，但AdminRoute无效。

AdminRoute看起来像这样：

const AdminRoute: React.SFC<RouteProps> = 
  ({ component: Component, ...other }) => {
    console.log('accessing protected route');

    return (
      <Route
        {...other}
        render={props =>
          store.user && store.isAuthorized(accessLevel) 
            ? <Component {...props} /> 
            : <h2>Access denied</h2>
        }
      />
    );
});

我希望内联实现和功能组件都可以完全相同地工作。

有什么区别？我忘了通过财产吗？打字稿编译有问题吗？

请帮助。

Answer 1

我想问题是路由器只渲染了所有匹配的路由。您应该尝试使用Switch组件，以便它仅呈现符合以下条件的第一个组件：

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

const App: React.SFC<{}>  = (
  <div>
    <BrowserRouter>
       <Switch>
         <Route render={props => <Header {...props} />} />
         <Route exact path="/" component={Main} />{' '}
         <Route exact path="/login" render={prop=>this.loginRedirect(props)}/>
         <Route exact path="/register" render={props => <Register {...props} />} />
         <Route exact path="/user" component={UserCard} />


         <AdminRoute exact path="/adminSettings" component={RestrictedSettings} />

         {/*<Route 
              exact path="/adminSettings" 
              render={props => store.user && 
                store.isAuthorized(UserRoles.Admin) 
                  ? <RestrictedSettings /> 
                  : <h2>Access denied</h2>
              }
            />
         */}

      </Switch>
    </BrowserRouter>
  </div>
);

在此处了解更多信息：https://reacttraining.com/react-router/web/guides/basic-components

当包裹在另一个组件中时，React Router未渲染组件传递到路由

我的代码：

1 个答案: