-2

Em um projeto em desenvolvimento, fiz o update no react-router-dom para a versão 6.3.0.

Antes de atualizar para a v6, este era o código em React no arquivo Routes.tsx, sem erros, usando o VSCode:

    import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
import Navbar from './core/components/Navbar';
import Admin from './pages/Admin';
import Catalog from './pages/Catalog';
import ProductDetails from './pages/Catalog/components/ProductDetails';
import Home from './pages/Home';

const Routes = () => (
    <BrowserRouter>
        <Navbar />
        <Switch>
            <Route path="/" exact>
                <Home />
            </Route>
            <Route path="/products" exact>
                <Catalog />
            </Route>
            <Route path="/products/:productId">
                <ProductDetails />
            </Route>
            <Redirect from="/admin" to="/admin/products" exact />
            <Route path="/admin">
                <Admin />
            </Route>
        </Switch>
    </BrowserRouter>
);

export default Routes;

Pesquisando melhor, encontrei algo falando que se você estiver usando react-router-dom v6, o componente Redirect foi removido do react-router versão 6 e foi substituído por Navigate, então apenas use Navigate em vez de Redirect.

Fiz a substituição, mas ainda estou encontrando erro no Switch (O módulo '"react-router-dom"' não tem nenhum membro exportado 'Switch'.) e na linha Navigate from. Continuo tendo erros nos dois primeiros 'exact'.


    import { BrowserRouter, Switch, Route, Navigate } from 'react-router-dom';
import Navbar from './core/components/Navbar';
import Admin from './pages/Admin';
import Catalog from './pages/Catalog';
import ProductDetails from './pages/Catalog/components/ProductDetails';
import Home from './pages/Home';

const Routes = () => (
    <BrowserRouter>
        <Navbar />
        <Switch>
            <Route path="/" exact>
                <Home />
            </Route>
            <Route path="/products" exact>
                <Catalog />
            </Route>
            <Route path="/products/:productId">
                <ProductDetails />
            </Route>
            <Navigate from="/admin" to="/admin/products" exact />
            <Route path="/admin">
                <Admin />
            </Route>
        </Switch>
    </BrowserRouter>
);

export default Routes;

Imagem do código para ressaltar os erros:

Erros no código após atualização no react-router-dom

Como resolvo isso?

1 Resposta 1

-1

O <Switch> não foi subtituido pelo navigate e sim pelo <Routes>

Para usar a v6, você precisará converter todos os seus <Switch> elementos para <Routes>.

<Route> Composição no React Router v6
O React Router v6 introduz um novo <Routes> elemento que substitui o <Switch>. Uma das principais vantagens do <Routes> over <Switch>é sua capacidade de entender <Route> elementos aninhados, assim como fizemos no React Router v3. Escreveremos mais sobre o quão legal <Routes> é nos documentos oficiais da v6.

documento do react route

2
  • Fiz as alterações no código conforme a documentação do react router dom v6 e minha aplicação está indo bem, só que tem uma coisa que ainda não está funcionando como era antes na versão 5. Quando eu clico no link ADMIN da página, eu tenho que ser redirecionado para 'localhost:3000/admin/products'
    – Marcb7
    25/06/2022 às 7:56
  • Segui a documentação da versão 6 e consegui fazer as alterações!
    – Marcb7
    25/06/2022 às 8:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .