Soy bastante nuevo en la creación de aplicaciones web y la programación en general. Tengo una aplicación web Reactjs que alojo desde un servidor doméstico. Tengo un nombre de dominio en GoDaddy. Estoy reenviando ese dominio a mi aplicación.
El problema: al ver la aplicación a través del nombre de dominio, la URL no cambia al pasar de una página a otra.
Objetivo: al ver la aplicación a través del nombre de dominio, me gustaría que la URL cambie a la página adecuada al navegar.
Cuando veo la aplicación desde la red local, las páginas aparecen en la URL de manera adecuada.
¿Hay algo en el lado web que deba hacer, o se trata de un problema de codificación? Estoy usando reaccionar-router-dom. He publicado la estructura básica a continuación.
<BrowserRouter> <Navbar /> <div className="container" style={{ marginTop: 40 }}> <Routes> <Route exact path="/" element={<Home/>}/> <Route exact path="/shop" element={<Shop productData={this.state.productData} showAllProducts={this.showAllProducts} addToCart={this.addToCart} showCart={this.showCart}/>}/> <Route exact path="/about" element={<About />}/> <Route exact path="/login" element={<LogIn authenticate={this.authenticate} />}/> <Route exact path="/signup" element={<SignUp registerUser={this.registerUser} />}/> <Route exact path="/profile/cart" element={<Cart user={this.state.user} showCart={this.showCart} productData={this.state.productData}/>}/> <Route exact path="/profile" element={<Profile user={this.state.user} viewProfile={this.viewProfile}/>}/> <Route exact path="/admin" element={<Admin isAdmin={this.isAdmin} />}/> </Routes> <Routes> <Route exact path="/shop/personalized" element={<Personalized productData={this.state.productData} showProductsByDesign={this.showProductsByDesign} addToCart={this.addToCart}/>}/> <Route exact path="/shop/nonpersonalized" element={<NonPersonalized productData={this.state.productData} showProductsByDesign={this.showProductsByDesign} addToCart={this.addToCart}/>}/> <Route exact path="/shop/allproducts" element={<AllProducts productData={this.state.productData} showAllProducts={this.showAllProducts} addToCart={this.addToCart}/>}/> <Route exact path="/images/checkAddress" element={PersonalizedPencilPouch}/> </Routes> </div> </BrowserRouter>Cualquier ayuda sería muy apreciada.
Asegúrese de estar utilizando el componente <Link> incorporado de React Router , no a etiqueta de HTML, de lo contrario, React lo tratará como un enlace normal. El enrutador maneja los enlaces de manera diferente a la implementación nativa para dar el efecto de un SPA .
<a href="/page">Click me</a>Debe convertirse:
import { Link } from "react-router-dom"; <Link to="/page">Click me</Link>"Reenviar" su dominio con Godaddy crea un "redireccionamiento enmarcado" donde Godaddy sirve un conjunto de marcos HTML que muestra su sitio en alguna otra URL dentro del marco. Es por eso que la URL no cambia a medida que navega. Siempre estás dentro del marco.
En lugar de usar el reenvío, desea servir su sitio desde el nombre de dominio. Para hacerlo, debe agregar un registro DNS A que apunte a la dirección IP de su servidor ( instrucciones para hacerlo en Godaddy ). Luego, debe agregar un <VirtualHost> a la configuración de su servidor web para que sepa cómo manejar las solicitudes del dominio.