Можно ли в react использовать компонент вместо Router?

Всем привет, подскажите, можно ли использовать компонент вместо react-router:
Я хочу сделать для пользователя индивидуальный url, как это сделано в вк(или vk.com/id1 или vk.com/dima).
Можно ли создать компоненту, в которой с помощью GraphQL по url адресу проверять есть ли в бд такой адрес.
Например пользователь переходит на страницу помощи (domain/help), я смотрю есть ли такая страница, если да, то смотрю есть ли у нее id, если нет то эта обычная страница, смотрю какому компонент этот адрес принадлежит и отображаю данный компонент.
Если все таки у нее есть id, значит это пользователь и через props прокидывваю этот id компоненте <аккаунт/>, следовательно отображаю <аккаунт/> , а в ней, я уже буду с помощью GraphQL подгружать нужную информацию о пользователе.
Если же в бд нет такой страницы, то отображаю компоненту <404/> .

Можно ли так делать, если да, то чем это может аукнуться?
А так же, может есть более правильный и проще способ сделать такое ?
Заранее спасибо.
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
1. Как вы в этой схеме собираетесь слушать обновления history и переходить на другие страницы?
2. Чем вам не угодил готовый инструмент, отлично решающий эту задачу?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Я в своем проекте сделал надстройку над react-router, главным образом потому, что там коряво реализована интеграция с redux. У react-redux-router из коробки диспатч экшена происходит после того, как произошел собственно роутинг, т.е. налицо костыль; у меня же смена роута является следствием экшена, что мне и было необходимо достичь.

Поэтому ответ - да, можно, но без роутера все равно не обойтись. Если вас не устраивает нативный роутер, создайте свой собственный, где слушаете history, и там можете управлять флоу как вам удобно. А дальше уже в обработчиках ваших экшенов будете производить все проверки и в редьюсере менять стейт.

Например, код моего роутера:
spoiler
import React from 'react';
import createHistory from 'history/createHashHistory';
import { Router } from 'react-router-dom';
import * as routerActions from './Actions/RouterActions';

class HashRouter extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.history = createHistory();
        this.history.listen(this.onHistoryChange.bind(this));

        this.store = this.props.store || this.context.store;
    }

    /**
     * Just initialize start route.
     */
    componentDidMount() {
        const { location } = this.history;
        
        const User = new UserEntity;
        const accessLevel = User.getRole();

        const routes = RoutesRepository.getRoutesBy(accessLevel);
        const match = RoutesRepository.getMatch(location, routes);

        this.store.dispatch(
            routerActions.routeChange(match)
        )
    }

    render() {
        return <Router history={this.history}>
            {this.props.children}
        </Router>;
    }

    /**
     * When user change browser history, 
     * dispatch actions for change routes.
     * 
     * @param  location Object
     * @param  action String
     * @return void
     */
    onHistoryChange(location, action) {
        if(!this.store) {
            return null;
        }

        const User = new UserEntity;
        const accessLevel = User.getRole();

        const routes = RoutesRepository.getRoutesBy(accessLevel);
        const match = RoutesRepository.getMatch(location, routes);

        this.store.dispatch(routerActions.routeChange(match));
    }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы