ReactJS Routing is it possible to rewrite or something similar

Question

By default the first route i want it to send me to HOME but when we have something like "/user1234" to userProfileComponent. Now what it happens is that it loads both the Counter and the userProfileComponent.

Is there a way to control that even manually chekcing withe a RegEx or something maybe a rewritte. Like for example if I send /user/123 it will be showned as /user123. Thanks in advance. I think i use react-routerv4

<Layout>  
        <Route exact path='/' component={Home} />
        <Route path='/:userid' component={userProfileComponent} />
        <Route path='/counter' component={Counter} />
 </Layout>;

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { RotatingBanners } from '../controls/RotatingBanners';
import { BestOnline } from '../controls/BestOnline';
import { VideoBanner } from '../controls/VideoBanner';
import { PopularCategories } from '../controls/PopularCategories';
import { ExclusiveDeals } from '../controls/ExclusiveDeals';
import { SpotlightStoresFW } from '../controls/SpotlightStoresFW';
import { EmailSignUpFW } from '../controls/EmailSignupFW';
import { BlogFeatures } from '../controls/BlogFeatures';

export class Home extends React.Component<RouteComponentProps<{}>, {}> {
    public render() {
        return (
            <div>
                <RotatingBanners />
                <BestOnline />
                <VideoBanner />
                <PopularCategories />
                <SpotlightStoresFW />
                <ExclusiveDeals />
                <EmailSignUpFW />
                <BlogFeatures />
            </div>
        );
    }
}

which version of react-router you're using? Probably you need to use `Switch`. — code-jaff, May 08 '18 at 15:12
@code-jaff Ok I will check to see how it works. In the meantime if you have a working example i would appreciate it. I use V4 — vkampouris, May 08 '18 at 15:15
take a loot at [this](https://stackoverflow.com/questions/44350506/react-router-v4-showing-multiple-routes-at-once) or [this](https://stackoverflow.com/questions/43994510/react-router-v4-renders-multiple-routes) or even [this](https://stackoverflow.com/questions/42984597/multiple-nested-routes-in-react-router-dom-v4) — Incepter, May 08 '18 at 15:16
@code-jaff I just found out that the order you place the routes matters. — vkampouris, May 08 '18 at 15:32
@vkampouris shouldn't be as react-router will render only a single first matching child within `Switch`. Absolutely order matters. — code-jaff, May 08 '18 at 15:34
@code-jaff Also I used Regex to solve my issue. Because then it didnt reach the NoMatch/404. Thank you guys :) — vkampouris, May 08 '18 at 18:03

ReactJS Routing is it possible to rewrite or something similar

0 Answers0