Novato React and express.js: Estoy tratando de usar el mismo componente de reacción de nivel superior para mostrar condicionalmente una página dependiendo de la “ruta” visitada. ¿Cuál es la mejor manera de pasar datos al componente de nivel superior para que pueda renderizar condicionalmente?

¿O puede reaccionar el componente y saber en qué “ruta” se encuentra y renderizar condicionalmente en función de eso?

Sí puede. De hecho, hay un paquete completo dedicado a esa función, llamado React Router. Su propósito es cargar el componente correcto, en función de la ruta URL que visita su usuario.

Aquí hay un ejemplo muy básico:

Routes.js

  importar Reaccionar desde 'reaccionar';
 importar {BrowserRouter como enrutador, ruta, conmutador} desde 'react-router-dom';

 importar miembros de './views/Members';
 Importar Main desde './views/Main';
 importar canción desde './views/Song';

 const NotFound = () => (
	 
404 Pagina no encontrada
) Rutas const = () => ( ) exportar rutas predeterminadas;

Hay una documentación completa para React Router en su página de Github, que le recomiendo que eche un vistazo (hay muchas más funciones en React Router) pero esencialmente solo importa los componentes y agrega una ruta para cada uno de ellos. Además, en la parte inferior, puede agregar una ruta para capturar convenientemente todas las rutas no existentes y llevarlas a una página 404.

Mantenga siempre sus rutas en un archivo separado, como Routes.js e impórtelo en su archivo de índice. Esto separa la lógica de enrutamiento, hace que su código sea más fácil de navegar y le permite anidar componentes de middleware, como la autenticación de usuario.