Morioh
Login
Sérgio Oliveira

Sérgio Oliveira

6 months ago

Como configurar um novo URL base no React

Uma URL (localizador uniforme de recursos) é um tipo de identificador uniforme de recursos (URI) que fornece uma maneira de acessar informações de computadores remotos, como um servidor web e armazenamento em nuvem.

Neste tutorial, ensinaremos como adicionar, criar ou configurar uma nova URL base no aplicativo React usando a biblioteca Router DOM v6. Neste tutorial você aprendeu como adicionar, criar ou definir uma nova URL base em um aplicativo React usando a biblioteca Router DOM v6.

  • Etapa 1: criar um novo aplicativo
  • Etapa 2: Criar componente de função
  • Etapa 3: configurar o React Router Dom
  • Passo 4: Definir Novas Rotas
  • Etapa 5: criar componentes de link
  • Etapa 6: criar um novo URL base
  • Etapa 7: visualizar o aplicativo no navegador

Etapa 1: criar um novo aplicativo

React CRA é uma maneira genérica, porém melhor, de criar um novo aplicativo React globalmente. Aqui está o comando que ajuda você a desenvolver um novo aplicativo React.

npx create-react-app react-blog-app

Para gerenciar a URL base, certifique-se de entrar na raiz do projeto.

cd react-blog-app

Etapa 2: Criar componente de função

No React, funcionalidades podem ser criadas com a classe, bem como componentes funcionais/ . Os componentes de função são fáceis de criar e gerenciar; portanto, crie a pasta de componentes.

Faça o arquivo componentes/Home.js com o código a seguir.

import React from 'react'
function Home() {
  return (
    <div>Home</div>
  )
}
export default Home

Em seguida, crie o arquivo componentes/Profile.js com o código sugerido.

import React from 'react'
function Profile() {
  return (
    <div>Profile</div>
  )
}
export default Profile

Agora, crie o arquivo componentes/Contact.js e coloque o código sugerido no arquivo.

import React from 'react'
function Contact() {
  return (
    <div>Contact</div>
  )
}
export default Contact

Etapa 3: configurar o React Router Dom

React Router DOM é um pacote padrão para configurar rotas e URL que ajuda você a navegar dentro do aplicativo. Este será o módulo principal para nos ajudar a configurar a URL base, portanto, execute o comando sugerido.

npm i react-router-dom --legacy-peer-deps

Passo 4: Definir Novas Rotas

Como dissemos anteriormente, as Rotas nos permitem navegar dentro do aplicativo. Para configurar ou criar novas Rotas, temos que navegar até a pasta de componentes ; aqui, crie o arquivo Nav.js

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import Profile from "./Profile";
import Contact from "./Contact";
const Nav = () => {
  return (
    <div>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
};
export default Nav;

Adicionamos componentes de função e módulos Router DOM: Routes e Route. Os módulos Routes oferecem um contêiner para uma árvore aninhada de elementos que renderiza a ramificação que melhor corresponde ao local atual. O módulo Route é usado para declarar um elemento que deve ser renderizado em um determinado caminho de URL.

Etapa 5: criar componentes de link

Navegue até o componente App.js e coloque o código a seguir. Você tem que importar o módulo Nav e o módulo Link. A API Link é uma API pública para renderizar um reconhecimento de histórico. Além disso, permite navegar até o componente ou página vinculado associado.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import { Link } from "react-router-dom";
import Nav from "./components/Nav";
const App = () => {
  return (
    <div className="container">
      <h2>React Configure Base Path Example</h2>
      <div className="mb-5">
        <Link className="nav-link link-danger" to="/">
          Home
        </Link>
        <Link className="nav-link link-danger" to="profile">
          Profile
        </Link>
        <Link className="nav-link link-danger" to="contact">
          Contact
        </Link>
      </div>
      <div>
        <h3>
          <Nav />
        </h3>
      </div>
    </div>
  );
};
export default App;

Etapa 6: criar um novo URL base

Para alterar o caminho base no React, certifique-se de ter adicionado o nome base ao módulo BrowserRouter no arquivo index.js.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter basename="/positronx">
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

Etapa 7: visualizar o aplicativo no navegador

Finalmente testaremos o aplicativo no navegador e garantiremos que o caminho base foi alterado. Agora vamos executar o comando npm start no console.

npm start

Você pode usar o novo caminho base fornecido aqui.

http://localhost:3000/positronx

Conclusão

Neste tutorial você aprendeu como adicionar, criar ou definir uma nova URL base em um aplicativo React usando a biblioteca Router DOM v6.

1 Likes1.60 GEEK