React router dom

Boa noite a todos, hoje venho compartilhar uma dica muito massa para quem está aprendendo sobre rotas e roteamento no REACT JS...

Existe uma lib para lidar com isso dentro do React, o famoso REACT ROUTER DOM, porém o intuito desse post é dar uma dica sobre uma coisa que acontece muito com quem está começando, que é quando implementamos as rotas da nossa aplicação da seguinte forma:

import React from 'react'

import { BrowseRouter, Switch, Route } from 'react-router-dom';

import Main from './pages/Main';

import Repository from './pages/Repository';

export default function Routes() {
    return (
        <BrowseRouter>
            <Switch>
                <Route path="/" component={Main} />
                <Route path="/repository" component={Repository} />
            </Switch>
        </BrowseRouter>
    );
}

O grande problema do código acima que muita gente que está começando inclusive eu mesmo quando comecei me deparei com o problema é que mesmo chamando a rota /repository o componente renderizado em tela é o componente Main. Isso acontece pois o react-router-dom não procura por uma igualdade entre o path que colocamos dentro do componente Route e a URL que foi digitada no navegador, ele procura saber se a URL digitada começa com o path em que foi atribuido ao componente Route, ou seja se o path dentro do componente começa com / ele sempre irá renderizar o Main, para resolvermos isso é simples, basta passarmos uma flag dentro do componente chamada exact, assim ele vai comparar se a URL é exatamente identica ao path, segue o código de exemplo:

import React from 'react'

import { BrowseRouter, Switch, Route } from 'react-router-dom';

import Main from './pages/Main';

import Repository from './pages/Repository';

export default function Routes() {
    return (
        <BrowseRouter>
            <Switch>
                <Route path="/" exact component={Main} />
                <Route path="/repository" component={Repository} />
            </Switch>
        </BrowseRouter>
    );
}

Assim o roteamento da sua aplicação funcionará da meneira correta!!!

Espero ter ajudado de alguma forma, grande abreço DEV!!!