Страница не загружается при вводе URL-адреса частного компонента в адресную строку браузера (React-router v4)

Я делаю приложение с аутентификацией, используя 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')));

введите здесь описание изображения


person Umbrella    schedule 30.08.2017    source источник


Ответы (1)


Попробуйте изменить эту часть:

const stuffToShow = (props) => {
    if(userStatus.authenticated) {
        return <Component {...props}/>;
    }
    return (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    );
};

<Redirect /> состоит из нескольких строк, их следует заключить в (). Это мое лучшее предположение о вашей проблеме.

person Win    schedule 31.08.2017
comment
Точно так же работает и с брекетами. Я думаю, что, скорее всего, проблема заключается в моем экспресс-сервере и как-то связана с тем, как я отображаю html. Я добавил эту часть в исходный пост и обновил скриншот. - person Umbrella; 31.08.2017
comment
Я не думаю, что это проблема сервера, потому что я заметил ошибку в вашей консоли. Это означает, что ваш javascript неисправен. Попробуйте изменить возвращаемое значение PrivateRoute на это и посмотрите, работает оно или нет: return <Route exact {...rest} render={(props) => { <Redirect to={{pathname: '/login', state: { from: props.location } }}/> }/> - person Win; 31.08.2017
comment
Извините, понятия не имею. Если вы не готовы поделиться полным кодом через github. - person Win; 31.08.2017
comment
Клонировал ваш проект, но не смог его запустить. Не знаю почему. Я заметил это в PrivateRoute.js: import {connectComponent} from '../../Utils//Utils';. Вы пытались это исправить? - person Win; 01.09.2017
comment
Это просто пользовательская функция, которую я написал, чтобы уменьшить шаблон. Он просто возвращает подключенный компонент. Я думаю, вы не можете запустить его, потому что на вашем компьютере должен быть установлен mongodb. - person Umbrella; 01.09.2017