Tengo esta estructura de componentes:

ingrese la descripción de la imagen aquí

Necesito basarme en 2 rutas diferentes para cargar dentro de {amp}lt;OtherComponent{amp}gt; la ruta correspondiente desde el enrutador.

Utilizo: "react-router-dom": "^5.1.2" , y vi algunas publicaciones que hablan sobre el uso de IndexRoute y props.children, pero IndexRoute no se puede resolver desde react-router-dom, parece que se eliminó en versión 5.

Mi enrutador (BrowserRouter) se ve así:

 {amp}lt;Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path="/" exact component={HomePage} /{amp}gt; {/*{amp}lt;IndexRoute component={ProjectsList} /{amp}gt; // The component to send to HomePage's `props.children` when route is '/'*/} {amp}lt;Route path="/login" component={Login} /{amp}gt; {amp}lt;Route path="/editProject" component={ProjectEditor} /{amp}gt; {/*{amp}lt;Redirect path="*" to="/" /{amp}gt;*/} {amp}lt;/Switch{amp}gt; {amp}lt;/Router{amp}gt; 

Al principio, {amp}lt;ProjectsList{amp}gt; se carga dentro de {amp}lt;HomePage{amp}gt; (codificado),

pero desde ProjectsList es necesario editar un proyecto, por lo que es necesario cargar el {amp}lt;ProjectEditor{amp}gt; esta vez dentro de {amp}lt;HomePage{amp}gt;

Una estructura más detallada:

ingrese la descripción de la imagen aquí

IndexRoute fue eliminado de React-Router a partir de v4. Fue utilizado como una especie de «ruta predeterminada»

Las rutas ahora son componentes regulares y se pueden representar como parte de cualquier componente, siempre que algún componente superior tenga una definición de enrutador. Anidar rutas le permite componer las rutas y representar componentes con esa estructura.

Las rutas también tienen una función de representación en la que puede representar cualquier componente

Si necesita representar ProjectsList como elementos secundarios de HomePage, ¿por qué no lo pasa como elementos secundarios?

 {amp}lt;Route path="/" exact render={() ={amp}gt; {amp}lt;HomePage{amp}gt;{amp}lt;ProjectsList /{amp}gt;{amp}lt;/HomePage{amp}gt;} /{amp}gt; 

Además, si está utilizando la última versión de React Router (5.1.0), puede usar los accesorios secundarios para las rutas para renderizar, en lugar de un accesorio de renderizado

 {amp}lt;Route path="/" exact{amp}gt; {amp}lt;HomePage{amp}gt;{amp}lt;ProjectsList /{amp}gt;{amp}lt;/HomePage{amp}gt; {amp}lt;/Route{amp}gt; 

Actualizar

Dada su actualización

Al principio, {amp}lt;ProjectsList{amp}gt; se carga dentro de {amp}lt;HomePage{amp}gt; (codificado),

pero desde ProjectsList es necesario editar un proyecto, por lo que es necesario cargar el {amp}lt;ProjectEditor{amp}gt; esta vez dentro de {amp}lt;HomePage{amp}gt;

puedes definir en tu componente HomePage , dentro de tu render, dos rutas

 return ( {amp}lt;Switch{amp}gt; {amp}lt;Route path="/editProject"{amp}gt;{amp}lt;ProjectsList /{amp}gt;{amp}lt;/Route{amp}gt; {amp}lt;Route path="/"{amp}gt;{amp}lt;ProjectsList /{amp}gt;{amp}lt;/Route{amp}gt; {amp}lt;/Switch{amp}gt; ) 

(Dependiendo de la versión, es posible que render={() ={amp}gt; ...} usar render={() ={amp}gt; ...} lugar

Si por alguna razón, prefiere tener todas las rutas dentro del mismo archivo, también puede hacerlo dentro de su definición de ruta.

 {amp}lt;Route path="/" exact{amp}gt; {amp}lt;HomePage{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route path="/editProject"{amp}gt;{amp}lt;ProjectsList /{amp}gt;{amp}lt;/Route{amp}gt; {amp}lt;Route path="/"{amp}gt;{amp}lt;ProjectsList /{amp}gt;{amp}lt;/Route{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/HomePage{amp}gt; {amp}lt;/Route{amp}gt; 

Pero en este caso, tendrá que representar a los children en su componente HomePage