Why is my component being rendered in the same page?-CodePudding

I have a landing page with a button that is a Link to a Register component but as I click on the button my Register component is being underneath my landing page and not in a new page. Why is this happening?

App.js:

import './App.css';
import { Fragment } from 'react';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
import Register from './components/auth/Register';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';



function App() {
  return (
    <div className="App">
      <Router>
        <Fragment>
          <Navbar/>
          <Landing/>
          <Routes>
            <Route path='/register' element={<Register />} />
          </Routes>
        </Fragment>
      </Router>
    </div>
  );
}

export default App;

import React from 'react'

const Register = () => {
  return (
    <section className="container">
      <h1 className="large text-primary">Sign Up</h1>
      <p className="lead">
        <i className="fas fa-user" /> Create Your Account
      </p>
      <form className="form" >
        <div className="form-group">
          <input
            type="text"
            placeholder="Name"
            name="name"
            
          />
        </div>
        <div className="form-group">
          <input
            type="email"
            placeholder="Email Address"
            name="email"
            
          />
          <small className="form-text">
            This site uses Gravatar so if you want a profile image, use a
            Gravatar email
          </small>
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Password"
            name="password"
            
          />
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Confirm Password"
            name="password2"
            
          />
        </div>
        <input type="submit" className="btn btn-primary" value="Register" />
      </form>
      <p className="my-1">
        
      </p>
    </section>
  )
}

export default Register

So my / path is a navbar with a landing page component, when i click on the button my path becomes /register but the landing page with the navbar are still being rendered and my register component also but below the others.

CodePudding user response：

The Landing component isn't being rendered on a route. In other words, it is just always rendered. If you want to conditionally render Landing then create a route for it and render it there.

Example:

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Landing />} />
          <Route path='/register' element={<Register />} />
        </Routes>
      </Router>
    </div>
  );
}

CodePudding user response：

The way React Router works is by replacing the Routes element with the corresponding one based on the route and the Route element. The rest of the page the Routes element is in doesn't change.

Since your landing page element is positioned directly inside the App component, it will always render irrespective of the route. To change that, replace it with a Route element inside of the Routes component that displays the landing page in its route.