3

Estoy haciendo una web de 1 sola pagina y necesito obtener un dato de la URL (https://localhost/parameter1) para usarlo en mi aplicación, lo mas cerca que estuve es esto:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
const AppRouter = () => (
  <BrowserRouter>
    <Route path='/:parameter1' render={props => console.log({...props.match.params}) }/>
  </BrowserRouter>
);

ReactDOM.render(<AppRouter />, document.getElementById('root'));

Pero no es lo que necesito, ya que necesito el parametro para usarlo en mi componente y no para mostrarlo en pantalla ni hacer un console log. Espero puedan ayudarme, desde ya muchas gracias!

2
  • ¿Entonces necesitas el parametro parameter1, para usarlo en el componente AppRouter que esta en la ruta /? Saludos
    – g.4
    Commented el 19 mar. 2021 a las 17:02
  • Hola @g.4, si tengo mi url localhost/parametro1 y necesito obtener ese parametro para usarlo en mi componenete. Muchas gracias!
    – Patricio
    Commented el 19 mar. 2021 a las 17:23

1 respuesta 1

2

El patrón más común es crear un componente para la ruta / y llamarlo Home, de esta forma se podrían usar las 3 propiedades que el componente route nos ofrece (match, location y history).

Ahora, por las necesidades en el diseño, se podrían declarar dos componentes route para Home, uno para cuando no se reciben parametros y otro para cuando si se reciben parametros.

Dejo esta demostración de como podría quedar implementado:

const Router = window.ReactRouterDOM.HashRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;

function App(){
  return(
   <div>
    <Router>
     <Link to='/' >Home</Link> - 
     <Link to='/123' >Home con URL param</Link>
       
    <Route path='/:itemId' exact render={({ match }) => {
           return <Home miParamUrl={match.params.itemId} />     
     }}/>
                
     <Route exact path="/" render={() => {
          return <Home />
     }}/>
    </Router>
  </div>
  );
}

function Home(props){
  console.log("Home miParamUrl",props.miParamUrl);
  return (
      <div>
        <p>En Home</p>
        {props.miParamUrl ? <p>con Param {props.miParamUrl}</p> : <p>sin Param</p>}
     </div>
  )
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src='https://unpkg.com/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
 

<div id="root"></div>

Esta es una propuesta, espero que sea de ayuda.

1
  • Hola, te agradesco por tu ayuda pero no me ha servido, recorda que estoy trabajando en REACTJS. Tambien me olvide de aclarar que que mi sitio es una web de 1 sola pagina Saludos!
    – Patricio
    Commented el 19 mar. 2021 a las 19:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.