Есть ли решение для преобразования пользовательских компонентов маршрута в массив маршрутов для использования в SSR? - PullRequest
Новая
       22

Есть ли решение для преобразования пользовательских компонентов маршрута в массив маршрутов для использования в SSR?

0 голосов
/ 04 мая 2019

Я внедряю рендеринг на стороне сервера в большое приложение React (только на стороне клиента). В исходном коде я использую пользовательские компоненты маршрута, такие как, и т. Д., И они получают реквизит от подключенного компонента контейнера. Все маршруты внутри.

Теперь я создал файл rout.js, в котором есть массив маршрутов, и я использую renderRoutes (маршруты) как на стороне сервера, так и на стороне клиента. Просто начал включать маршруты в этот массив из "старого" кода. Простые маршруты, такие как, легко реализовать, но я не могу найти никакого ответа или решения, как я могу реализовать способ визуализации определенных пользовательских маршрутов, упомянутых выше.

Я пытался использовать свой собственный цикл для рендеринга массива маршрутов на сервере и клиенте с некоторыми конкретными условиями, но это не было решением.

Вот старый код, например, на клиенте: 

<Route exact path={'/'} component={Landing} />
<Route exact path={'/login'} component={Login} />
<PrivateRoute exact path={'/profile'} component={this.switchComponent(Profile)} {...this.props} />
<PrivateRoute path={'/adjust-subscription/:type/:term'} component={AdjustRecruiterSubscription} {...this.props} />

вот здесь PrivateRoute: 

import React from 'react';
import PropTypes from 'prop-types';
import { loadState } from '../../utils/localStorage';
import { Route, Redirect } from 'react-router-dom';
import { RECRUITER_USER_TYPE, EMPLOYER_USER_TYPE } from '../../utils/constants';

class PrivateRoute extends React.Component {
    render() {
        const { component, ...rest } = this.props;
        const Component = component;
        const localStorageUser = loadState('user');
        return (
            <Route
                {...rest}
                render={props => {
                    if (this.props.isLoggedIn && localStorageUser.phone) {
                        return <Component {...props} />;
                    }
                    if (
                        this.props.isLoggedIn &&
                        !localStorageUser.phone &&
                        localStorageUser.type === RECRUITER_USER_TYPE
                    ) {
                        return (
                            <Redirect
                                to={{
                                    pathname: '/sign-up/recruiter',
                                    state: { from: props.location }
                                }}
                            />
                        );
                    }
                    if (
                        this.props.isLoggedIn &&
                        !localStorageUser.phone &&
                        localStorageUser.type === EMPLOYER_USER_TYPE
                    ) {
                        return (
                            <Redirect
                                to={{
                                    pathname: '/auth-user/company',
                                    state: { from: props.location }
                                }}
                            />
                        );
                    }

                    return (
                        <Redirect
                            to={{
                                pathname: '/login',
                                state: { from: props.location }
                            }}
                        />
                    );
                }}
            />
        );
    }
}

PrivateRoute.propTypes = {
    component: PropTypes.func,
    isLoggedIn: PropTypes.bool,
    location: PropTypes.object
};

export default PrivateRoute;

и вот новый массив маршрутов: 

export const routes = [
  {
    path: '/',
    exact: true,
    component: Landing,
    loadData: getUser
  },
  {
    path: '/login',
    exact: true,
    component: Login
  },
  {
    path: '/*',
    component: NotFound
  }
];

export default [
  {
    component: Layout,
    path: '/',
    routes
  }
];

Отображение маршрутов: 

<Provider store={store}>
  <Router location={req.url} context={context}>
     {renderRoutes(routes)}
  </Router>
</Provider>

Так что мой вопрос заключается в том, чтобы захотеть преобразовать последние 2 маршрутов () в старом коде в массив новых маршрутов. Я много гуглил и пробовал несколько вещей, но у меня ничего нет. Спасибо за любую помощь.

...