Quiero cargar el componente React según el nombre del host, ejemplo, digamos que tenemos la aplicación React 'Frontend' y la URL para acceder a esta aplicación es <base_url>/test/login o <base_url>/test/home . Ahora quiero acceder a esta aplicación desde 2 nombres de host diferentes.
test.abc.com/test/login , test.abc.com/test/hometest.xyz.com/test/login , test.xyz.com/test/home Ahora, si el usuario usa el n.° 1, se mostrará la página de inicio/inicio/cierre de sesión solo para test.abc.com y para el n.° 2, la página de inicio/inicio/cierre de sesión es diferente. Básicamente, necesito personalizar la interfaz de usuario en función del nombre de host.
¿Alguien puede decirme cómo puedo lograr este escenario o hay alguna otra forma de hacerlo?
location.hostnamePor ejemplo:
import { ABCLogin, XYZLogin } from "./LoginComponents"; const Login = location.hostname === "test.abc.com" ? ABCLogin : XYZLogin; const App = () => { /* ... */ <Route path="login" element={<Login />}> /* ... */ }De un comentario sobre otra respuesta:
Si la aplicación se ejecuta desde 100 nombres de host y el inicio de sesión/inicio/cierre de sesión y otros son diferentes según el nombre de host, entonces, en este caso, ¿este enfoque también es aplicable?
Pasar de 2 (como se especifica en la pregunta) a 100 es algo así como un movimiento de portería, pero...
Dado que incluir 100 componentes de inicio de sesión diferentes inflaría la aplicación, haría la selección en el momento de la compilación. Los detalles dependerán de la cadena de herramientas que esté utilizando para crear su aplicación de producción.
Por ejemplo, si estuviera usando Webpack, podría hacer algo como:
resolve: { alias: { components: path.resolve(__dirname, 'src/components/'), 'components/Login': path.resolve(__dirname, `src/components/${process.env.TARGETHOSTNAME}Login`) } } Esto requeriría que establezca la variable de entorno TARGETHOSTNAME antes de compilar.
Use window.location.hostname y useEffect para lograr el comportamiento deseado. Básicamente, verifique la URL dentro useEffect y redirija usando la biblioteca ReactRouterDOM o algo similar.
obtenga el nombre de host con la función javascript location.hostname; si el nombre de host es test.abc.com, redirija a test.abc.com/logout; de lo contrario, redirija a test.xyz.com/logout