Is it possible to use a component instead of Router in react?

Question

React

Hello everyone, tell me if it is possible to use a component instead of react-router:
I want to make an individual url for the user, as is done in vk (or vk.com/id1 or vk.com/dima).
Is it possible to create a component in which using GraphQL by url address to check if there is such an address in the database.
For example, the user goes to the help page (domain / help), I look if there is such a page, if so, then I look if it has an id, if not, then this is a regular page, I look at which component this address belongs to and display this component.
If it still has an id, then it’s a user and through props I pass this id to the <account /> component, therefore I display <account /> , and in it, I will load the necessary information about the user using GraphQL.
If there is no such page in the database, then I display the <404/> component.
Is it possible to do this, and if so, what can come back to haunt it?
And also, maybe there is a more correct and easier way to do this?
Thanks in advance.

Answer 1

1. How are you going to listen to history updates and navigate to other pages in this scheme?
2. What didn’t please you with a ready-made tool that perfectly solves this problem?

Answer 2

I made an add-on over react-router in my project, mainly because the integration with redux is clumsily implemented there. For the react-redux-router out of the box, the dispatch action happens after the actual routing has happened, i.e. there is a crutch; for me, the change of the route is a consequence of the action, which I needed to achieve.
Therefore, the answer is yes, you can, but you still can’t do without a router. If you are not satisfied with the native router, create your own, where you listen to history, and there you can control the flow as you like. And then in the handlers of your actions you will perform all the checks and change the state in the reducer.
For example, my router code:

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));
    }
}