Я делаю приложение с аутентификацией, используя react-router и react-router-redux для обработки маршрутизации. Мои маршруты отображаются, как и ожидалось, когда я начинаю с нечастного маршрута, однако, когда я ввожу URL-адрес частного маршрута непосредственно в адресную строку браузера, ничего не загружается (скриншот). Как я могу решить эту проблему?
PrivateRoute.js
const PrivateRoute = ({userStatus, component: Component, ...rest }) => {
const stuffToShow = (props) => {
if(userStatus.authenticated) {
return <Component {...props}/>;
}
return <Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
};
return <Route exact {...rest} render={stuffToShow}/>
};
export default connectComponent(['userStatus'], PrivateRoute);
маршруты.js
export function renderRoutes(routes) {
return routes.map((route, i) => {
if(route.private) {
return <PrivateRoute key={i} {...route} />;
}
return <Route key={i} {...route}/>;
})
}
const routes = [
{
path: '/',
exact:true,
component: Home
},
{
path: '/login',
exact:true,
component: Login
},
{
path: '/registration',
exact:true,
component: Registration
},
{
path: '/users/:id',
exact:true,
component: UserPage,
private: true
},
{
path: '/users',
exact:true,
component: Users,
private: true
},
{
path: '/goodBye',
exact:true,
component: Goodbye
},
{
path: '*',
component: NoMatch
}
];
корень:
<Provider store={store}>
<Router history={history}>
<div>
<Header />
<Switch>
{renderRoutes(routes)}
</Switch>
</div>
</Router>
</Provider>
Как я отображаю html на экспресс-сервере:
this.app.use('/api/users', userRoute);
this.app.use('/api/blogPosts', blogPostsRoute);
this.app.use('*',(req,res) => res.sendFile(path.resolve(__dirname, '..', 'public', 'index.html')));