Início / coding / Perguntas / 77778627
Accepted
Michał Turczyn
Asked: 2024-01-08 17:55:01 +0800 CST

Como lidar com o caminho padrão [duplicado]

  • 772

Estou usando o React Router para meu site e encontrei o seguinte problema. Eu defini meu componente principal do aplicativo da seguinte maneira:

import './App.css'
import { Navbar } from './Navbar'
import { Outlet } from 'react-router'

function App() {
    return (
        <div>
            <Navbar />
            <Outlet />
        </div>
    )
}

export default App

e então usei este componente para rota base:

<BrowserRouter>
    <Routes>
        <Route path="/" element={<App />} >
            <Route path='home' element={<Home />} index />
            <Route path='about' element={<About />} />
        </Route>
        <Route path="*" element={<Navigate to="/Home" replace />} />
    </Routes>
</BrowserRouter>

Tudo funciona bem, posso navegar nas páginas home e about, mas quando navego para /, aparece uma página em branco com Navbar, o que é compreensível, mas não sei como poderia exibir minha página inicial padrão. Posso de alguma forma instruir o React para redirecionar para home? Não consigo definir Homeo componente para / rota, pois isso quebraria totalmente o aplicativo (já que o Appcomponente possui o Outletcomponente).

Versões das bibliotecas:

"react-dom": "^18.2.0",  
"react-router": "^6.21.1",  
"react-router-dom": "^6.21.1",
reactjs

1 respostas

  1. Best Answer

    Parece que você já sabe o que causa o problema, só precisa de uma orientação com a parte de redirecionamento.

    Como você já mencionou, o código está funcionando conforme o esperado. Olhando para sua estrutura, não há filhos configurados para serem renderizados quando o caminho "/" for correspondido. Para corrigir isso, você deve usar o indexatributo e acionar uma navegação para "/home"quando o caminho "/"for acessado.

    Para fazer isso:

    <BrowserRouter>
<Routes>
    <Route path="/" element={<App />} >
        <Route index element={<Navigate replace to="/home" />} />
        <Route path='home' element={<Home />} />
        <Route path='about' element={<About />} />
    </Route>
    <Route path="*" element={<Navigate replace to="/home" />} />
</Routes>

    Observe a linha que adicionei:

     <Route index element={<Navigate replace to="/home" />} />

    Esta nova rota possui indexatributos e também usa <Navigate>componentes fornecidos pelo react-router.

    1. indexatributo: Este atributo torna esta rota a rota padrão para o pai, que é "/" no seu caso.

    2. <Navigate>: Aqui no seu exemplo, não podemos renderizar <Home>diretamente, pois você solicitou especificamente para não fazer isso:

      Não consigo definir Homeo componente para /rota, pois isso quebraria totalmente o aplicativo (já que o Appcomponente possui o Outletcomponente).

      Portanto, ele redirecionará todos "/"os caminhos "/home"para.

    Embora isso provavelmente resolva o problema que você está enfrentando, sugiro fortemente que você use um não vazio "/"e faça o roteamento lá. Na maioria dos casos, "/" é a casa, e não "/home".

    • 1

relate perguntas