Question

登录后我只想要管理员组件，但我的登录组件仍然显示。

boot-client.tsx：

import * as RoutesModule from './routes';

    function renderApp() {
        ReactDOM.render(

            <AppContainer>
                <Provider store={store}>
                    <ConnectedRouter history={history} children={routes} />
                </Provider>
            </AppContainer>
            ,
            document.getElementById('react-app')
        );
    }

routes.tsx：

export const routes = <div>   
<PrivateRoute  component={FetchData} />
<Route path='/' component={Logon} />
<Route path='/administrate' component={Administrate } />  
  </div>
 ;

我的组件“PrivateRoute”如下所示，登录后需要重定向到administrate组件：

export const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
        localStorage.getItem('user')
            ? <Redirect to={{ pathname: '/administrate', state: { from: props.location } }}/>
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
    )} />
)

有人能指出我正确的方向吗？我在俯瞰什么？万分感谢。

Answer 1

将exact添加到/路由，否则/和/administrate将匹配。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact-bool

Answer 2

那是因为url匹配两个路径。另外，我会用<Switch>围绕它，强制它只显示其中一个。这很适合添加默认路径，否则默认路径将始终显示

reactjs组件都在显示

2 个答案: