How can I change the URL for a React app that I'm hosting myself and to which I forward a domai-CodePudding

I'm pretty new to building web applications and programming in general. I have a Reactjs web application that I host from a home server. I own a domain name on GoDaddy. I am forwarding that domain to my app.

The Issue: When viewing the app via the domain name, the URL does not change when moving between pages.

Goal: When viewing the app via the domain name, I would like for the URL to change to the appropriate page when navigating.

When I view the app from the local network, the pages appear in the URL appropriately.

Is there something on the web side that I need to do, or is this a coding issue? I'm using react-router-dom. I've posted the basic structure below.

<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>

Any help would be greatly appreciated.

CodePudding user response：

Ensure that you are using React Router's built-in <Link> component - not HTML's a tag, otherwise React will treat it as a regular link. Router handles links differently to the native implementation in order to give the effect of an SPA.

<a href="/page">Click me</a>

Should become:

import { Link } from "react-router-dom"; 
<Link to="/page">Click me</Link>

CodePudding user response：

"Forwarding" your domain with Godaddy creates a "framed redirect" where Godaddy serves an HTML frameset that shows your site at some other URL inside the frame. That is why the URL doesn't change as you navigate. You are always inside the frame.

Rather than you using forwarding you want to serve your site from the domain name. To do that you need to add a DNS A record pointing to the IP address of your server (instructions to do so at Godaddy). Then you need to add a <VirtualHost> to your web server configuration so that it knows how to handle requests for the domain.