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
    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
    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/react@16.3.1/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/react-router@5.0.0/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/babel-standalone@6.26.0/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
    el 19 mar. 2021 a las 19:40

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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