Lo que quiero es que cuando ingrese la ruta '/' , muestre la página de inicio ( App.js ) y cree un enlace especial para redirigir a una página externa
import React from 'react'; import { Routes, Route } from 'react-router-dom'; import App from './App'; const Home = () => { return ( <Routes> <Route path="/" element={<App />} /> <Route path="/g" element={() => window.location.replace('https://google.com')} /> </Routes> ) } export default Home;Resultado:
http://localhost:3004/ no carga la página de inicio y muestra una página en blanco en su lugarhttp://localhost:3004/g no redirige, muestra una página en blanco como arribaAsí que traté de deshacerme del enrutador y renderizar la aplicación directamente, todavía funciona
import React from 'react'; import { Routes, Route } from 'react-router-dom'; import App from './App'; const Home = () => { return ( <App /> ) } export default Home;¿Qué hice mal?
El problema es que su Route todavía necesita tener un elemento JSX como accesorio del elemento. Así que simplemente haga una función que tenga su window.location.replace en ella.
function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="g" element={<Redirect />} /> </Routes> </BrowserRouter> ); } function Home() { return 'Home'; } function Redirect() { window.location.replace('https://google.com'); }