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.
parameter1
, para usarlo en el componenteAppRouter
que esta en la ruta/
? Saludos