React Router不呈现受保护的路由

时间:2019-07-02 11:07:04

标签: reactjs react-router mobx mobx-react

我只为经过身份验证的用户创建了受保护的路由,但是出了点问题。

const PrivateRoute = inject('rootStore')(observer(({ rootStore, component: Componenet, ...rest }: any) => (
    <Route {...rest} render={(props) => (
        rootStore!.identityStore.isAuthenticated
        ? <Componenet {...props} />
        : <Redirect to="/login" />
    )} />
)))

const App = (<Provider rootStore={new RootStore()} >
    <HashRouter>
        <Switch>
            <Route exact path="/login" component={Login} />
            <Navbar />
            <div className="page-container" >
                <Header />

                <div className="main-content">
                    <div className="section__content section__content--p30">
                        <div className="container-fluid">
                            <PrivateRoute exact path="/" component={Dashboard} />
                            <PrivateRoute exact path="/notifications" component={Dashboard} />
                            <PrivateRoute exact path="/members" component={Members} />
                            <PrivateRoute exact path="/add-member" component={AddMember} />
                            <Footer />
                        </div>
                    </div>
                </div>
            </div>
        </Switch>
    </HashRouter >
</Provider>)

const rootElement = document.getElementById('page-wrapper')

ReactDOM.render(App, rootElement)

唯一呈现的组件是导航栏,重定向也不起作用,但是如果我在URL栏中手动输入登录名,那么它将起作用。通过导航栏导航或手动输入URL均无法使受保护的路线起作用。我调试了很多东西,但是我很累并且找不到问题,如果有人可以帮助我,我会很高兴。我正在使用mobx!

enter image description here

0 个答案:

没有答案