我只为经过身份验证的用户创建了受保护的路由,但是出了点问题。
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!