React Router é uma biblioteca padrão para roteamento no React. Ele permite a navegação entre visualizações de diferentes componentes em um aplicativo React, permite que a URL do navegador seja alterada e mantém a UI sincronizada com a URL.
Para entender como funciona o React Router, vamos criar um aplicativo simples para React. O aplicativo incluirá os componentes home, about e contact. Estaremos usando o React Router para navegar entre esses componentes.
npx create-react-app
Seu ambiente de desenvolvimento está pronto. Vamos agora instalar o React Router em nossa aplicação.
Roteador React : O React Router pode ser instalado em seu aplicativo React via npm. Siga as etapas abaixo para configurar o roteador em seu aplicativo React:
Passo 1: CD no diretório do seu projeto, ou seja ., java.
chmod 755
Etapa 2: use o seguinte comando para instalar o React Router:
instalação npm - -save react-router-dom
Depois de instalar o react-router-dom, adicione seus componentes ao seu aplicativo React.
Adicionando componentes do roteador React:
Os principais componentes do React Router são:
Em vez de percorrer em sequência, as rotas são selecionadas com base na melhor correspondência.
Para adicionar componentes do React Router ao seu aplicativo, abra o diretório do projeto no editor que você usa e vá para o arquivo app.js. Agora, adicione o código abaixo ao app.js.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; Nota: BrowserRouter é apelidado de Router.
Usando o roteador React: Para usar o React Router, vamos primeiro criar alguns componentes no aplicativo React. No diretório do seu projeto, crie uma pasta chamada componentes dentro da pasta src e agora adicione 3 arquivos chamados home.js, about.js e contact.js na pasta de componentes.
Vamos adicionar algum código aos nossos 3 componentes:
Home.js:
import React from 'react'; function Home (){ return } export default Home; Sobre.js:
import React from 'react'; function About () { return <h2> jAVAtPOINT is a computer science portal for TUTORIALS!</h2> Read more about us at : <a href="https://www.javatpoint.in/about/"> https://www.javatpoint.in/about/ </a> } export default About; Contato.js:
import React from 'react'; function Contact (){ return You can find us here: <br> Javatpoint <br> G-13, second floor, Sector -3 Noida <br> Noida, Uttar Pradesh (201305) } export default Contact; Agora, vamos incluir os componentes do React Router na aplicação:
retornando um array java
NavegadorRoteador : adicione um alias BrowserRouter como roteador ao seu arquivo app.js para agrupar todos os outros componentes. BrowserRouter é um componente pai e pode ter apenas um filho.
class App extends Component { render() { return ( ); } } Links: Vamos agora criar os links dos nossos componentes. O componente Link usa adereços para descrever o local para o qual o link deve navegar.
<ul> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul>
Agora execute sua aplicação no host local e clique no link criado. Você notará que os URLs mudam de acordo com o valor do componente do link.
Rota : o componente de rota nos ajudará a estabelecer o link entre a IU do componente e o URL. Para incluir a rota no aplicativo, adicione o código abaixo ao seu app.js.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Os componentes agora estão conectados e clicar em qualquer link renderizará o componente correspondente. Vamos agora tentar entender os adereços associados ao componente raiz.
- Elemento refere-se ao componente que será renderizado se o caminho corresponder.
Observação: por padrão, as rotas são inclusivas, o que significa que mais de um componente de rota pode corresponder a um caminho de URL e ser renderizado simultaneamente. Se quisermos renderizar um único componente, precisamos usar rotas aqui.
Rotas : para ler um único componente, coloque todas as rotas dentro do componente Routes.
<route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> </route></route></route> Alterne grupos entre várias rotas, itere sobre eles e encontre o primeiro que corresponda ao caminho. Assim, o componente correspondente do caminho é renderizado.
Aqui está nosso código-fonte completo após adicionar todos os componentes:
import React, { Component } from 'react'; import { BrowserRouter as Router,Routes, Route, Link } from 'react-router-dom'; import Home from './component/home'; import Contact from './component/contact'; import About from './component/about'; import './App.css'; class App extends Component { render() { return ( <ul classname="App-header"> <li> Home </li> <li> About Us </li> <li> Contact Us </li> </ul> <route exact path="/" element="{}"> <route exact path="/about" element="{}"> <route exact path="/contact" element="{}"> ); } } export default App; </route></route></route> Agora você pode clicar no link e navegar pelos diferentes componentes. O React Router mantém a interface do usuário do seu aplicativo sincronizada com o URL.
Finalmente, implementamos com sucesso a navegação em nosso aplicativo React usando React Router.
Um que usa a API de histórico HTML5 (eventos pushstate, replacestate e popstate) para manter sua IU sincronizada com o URL.
nome base: string
URL base para todos os locais. Se o seu aplicativo for servido a partir de um subdiretório no seu servidor, você desejará configurá-lo para esse subdiretório. Um nome base formatado corretamente deve conter uma barra inicial, mas nenhuma barra final.
// renders // renders <a href="tmp//calendar/tomorrow"> ... </a>
getUserConfirmation: função
Uma função a ser usada para confirmar a navegação. O padrão é usar window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> forceRefresh: bool
Se for verdade, o roteador usará atualizações de página inteira na navegação na página. Você pode querer usar isso para imitar como um aplicativo tradicional renderizado por servidor funcionaria com atualizações de página inteira entre a navegação de página.
comprimento da chave: número
O comprimento do local. Chave. O padrão é 6.
filhos: nó- elemento filho a ser renderizado.
Nota: No React, você deve usar um único elemento filho porque o método render não pode retornar mais de um elemento. Se precisar de mais de um elemento, você pode tentar envolvê-los em um arquivo adicional ou .
Um que usa a parte hash do URL (ou seja, window.location.hash) para manter sua IU sincronizada com o URL.
lista vinculada java
Nota: o hash não suporta localização do histórico. Chave ou localização. Estado. Nas versões anteriores, tentamos reduzir o comportamento, mas houve casos extremos que não conseguimos resolver. Qualquer código ou plugin que exija esse comportamento não funcionará.
Como esta tecnologia se destina a suportar apenas navegadores mais antigos, recomendamos que você configure seu servidor para funcionar com ela.
nome base: string
O URL base para todos os locais. Um nome base formatado corretamente deve ter uma barra inicial, mas nenhuma barra final.
// renders <a href="#/calendar/today"> </a>
getUserConfirmation: função
Uma função a ser usada para confirmar a navegação. O padrão é usar window.confirm.
{ // this is the default behavior const allowTransition = window.confirm(message); callback(allowTransition); }} /> hashType: string
A codificação usada para janela.localização.hash . Os valores disponíveis são:
- 'slash' - cria hashes como #/ e #/sunshine/lollipops
- 'noslash' - # e #sunshine/pirulitos . como o hash cria
- 'hashbang' - cria hashes 'ajax crawlable' (obsoleto pelo Google) como #!/ e #!/sunshine/lollipops
O padrão é 'barra'.
filhos: nó
Um único elemento filho a ser renderizado.
Fornece navegação declarativa e acessível em seu aplicativo.
About
para sequenciar
Uma representação de string de um local de link é criada combinando o nome do caminho, a pesquisa e as propriedades de hash do local.
Um objeto que pode ter qualquer uma das seguintes propriedades:
para: função
Uma função na qual a localização atual é passada como argumento e que deve retornar a representação da localização como uma string ou objeto.
({ ...location, pathname: '/courses' })} /> `${location.pathname}?sort=name`} /> substituir: bool
Quando verdadeiro, clicar no link substituirá a entrada atual em vez de adicionar uma nova
entry to the history stack.
referência interna: func
A partir do React Router 5.1, se você estiver usando o React 16, você não deverá precisar deste suporte, pois encaminhamos o ref para o subjacente . Use uma referência normal.
Permite acesso à referência interna do componente.
mapa java
{ // `node` refers to the mounted DOM element // or null when unmounted }} /> innerRef: RefObject
A partir do React Router 5.1, se você estiver usando o React 16, você não deverá precisar deste suporte porque encaminhamos o ref para o subjacente . Use uma referência normal.
Obtenha a referência subjacente do componente usando React.createRef.
listas em java
let anchorRef = React.createRef()
componente: React.Component
Se desejar utilizar seu próprio componente de navegação, você pode fazê-lo passando-o pela propriedade do componente.
const FancyLink = React.forwardRef(({ navigate, ...props }, ref) => { return ( <a ref="{ref}" {...props} onclick="{handleClick}">💅 {props.children} ) }) </a> Você também pode passar adereços que gostaria que estivessem no como título, id, className, etc.
Uma versão especial disso adicionará atributos de estilo ao elemento renderizado se ele corresponder a uma URL existente.
About
nomedaclasse: string | função
className pode ser uma string ou uma função que retorna uma string. Se a função className for utilizada, o estado ativo do link é passado como parâmetro. Isso é útil se você deseja aplicar exclusivamente um className a um link inativo.
'nav-link' + (!isActive ? ' unselected' : '') } >
Perguntas frequentes
No React Router v6, activeClassName será removido e você deverá usar a função className para aplicar o nome da classe aos componentes NavLink ativos ou inativos.
ActiveClassName: String
classe para fornecer o elemento quando ele estiver ativo. A classe padrão fornecida está ativa. Ele será combinado com a propriedade classname.
estilo: objeto | função
style pode ser um objeto React.CSSProperties ou uma função que retorna um objeto de estilo. Se o estilo da função for utilizado, o estado ativo do link é passado como parâmetro.
({ color: isActive ? 'green' : 'blue' })} > No React Router v6, o estilo ativo será removido e você deverá usar o estilo de função para aplicar estilos embutidos a componentes NavLink ativos ou inativos.
Estilo Ativo: Objeto
Os estilos aplicados ao elemento quando ele está ativo.
<navlink to="/faq" activestyle="{{" fontweight: 'bold', color: 'red' }} < pre> <h3>exact: bool</h3> <p>When true, the active class/style will only apply if the location is an exact match.</p> <pre> Profile </pre> <h3>strict: bool</h3> <p>If true, the trailing slash on a location's pathname will be considered when determining whether the location matches the current URL. See the documentation for more details.</p> <pre> Events </pre> <h3>isActive: func</h3> <p>A function to add additional logic to determine if the Link is active. This should be used when you want to do more than verify that the pathname of the Link matches the pathname of the current URL.</p> <pre> { if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 </pre> <h3>location: object</h3> <p>isActive Compares to the current history location (usually the current browser URL).</p> <h3>aria-current: string</h3> <p> <strong>The value of the area-current attribute used on the active Link. Available values are:</strong> </p> <ul> <li>'page' - used to indicate a link within a set of pagination links</li> <li>'Steps' - used to indicate a link within the step indicator for a step-based process</li> <li>'location' - used to indicate an image that is visually highlighted as the current component of the flow chart</li> <li>'date' - used to indicate the current date within the calendar</li> <li>'time' - used to indicate the current time within a timetable</li> <li>'true' - used to indicate whether NavLink is active</li> <li>'false' - used to prevent assistive technologies from reacting to the current Link (one use case would be to prevent multiple area-current tags on a page)</li> </ul> <hr></navlink> estrito: bool
Se for verdade, a barra final no nome do caminho de um local será considerada ao determinar se o local corresponde ao URL atual. Consulte a documentação para obter mais detalhes.
Events
isActive: função
Uma função para adicionar lógica adicional para determinar se o link está ativo. Isto deve ser usado quando você deseja fazer mais do que verificar se o nome do caminho do link corresponde ao nome do caminho da URL atual.
{ if (!match) { return false; } // only consider an event active if its event id is an odd number const eventID = parseInt(match.params.eventID); return !isNaN(eventID) && eventID % 2 === 1; }} > Event 123 localização: objeto
isActive Compara com o local atual do histórico (geralmente o URL atual do navegador).
aria-corrente: string
O valor do atributo area-current usado no Link ativo. Os valores disponíveis são:
- 'página' - usado para indicar um link dentro de um conjunto de links de paginação
- 'Etapas' - usado para indicar um link dentro do indicador de etapa para um processo baseado em etapas
- 'localização' - usado para indicar uma imagem visualmente destacada como o componente atual do fluxograma
- 'data' - usado para indicar a data atual no calendário
- 'time' - usado para indicar a hora atual dentro de um horário
- 'true' - usado para indicar se o NavLink está ativo
- 'falso' - usado para evitar que tecnologias assistivas reajam ao Link atual (um caso de uso seria evitar múltiplas tags de área atual em uma página)