Navigation with Link and Route is not working-CodePudding

I have tried to use Route, Router and Link to navigate to my register and signin page. I have two buttons in my navbar. When I click on Sign up or Login button i should be able to see the respective pages but its not happening. I can see the change in the URL but the home page keeps loading again and again.

Index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter as Router} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
   <Router>
      <App />
   </Router>
 </React.StrictMode>
);

 reportWebVitals();

App.js:

import './App.css';
import React from 'react'; 
import NavigationBar from './components/Navigation';
import Home from './components/Home';
import Register from './components/Register';
import { Route, Routes} from 'react-router-dom';
import SignIn from './components/Singnin';

function App() {
  return (
    <div>
      <NavigationBar />
      <Home />
      <Routes>
        <Route exact path="/" element={<Home />}/>
        <Route exact path="/register" element={<Register />}/>
      <Route exact path="/signin" element={<SignIn />}/>
      </Routes>
    </div>
   );
 }

export default App;

Navigation.js:

 import React from 'react';
 import 'bootstrap/dist/css/bootstrap.css';
 import {Navbar, Container, Button} from 'react-bootstrap';
 import '../style/Navigation.css';
 import { Link } from 'react-router-dom';


 const NavigationBar =() => {
   return(
       <Navbar expand="lg" variant="light" className="navigation">
            <Container>
               <Navbar.Brand><Link to={"/"}>Navbar</Link></Navbar.Brand>
            </Container>
               <Button variant="outline-light" className="buttonStyle"><Link to={"/register"}>Sign Up</Link></Button>
               <Button variant="outline-light" className="buttonStyle"><Link to={"/signin"}>Login</Link></Button>
        </Navbar>
    )
}

  export default NavigationBar;

  import React from 'react';


  const Register =() =>{
    return(
       <div><a href='#'>Register</a></div>
   )
}

export default Register;

Signin.js:

import React from 'react';

const SignIn =() =>{
   return(
       <div>SignIn</div>
   )
}

export default SignIn;

CodePudding user response：

The homepage is keep rendering again and again because you are rendering it every time in your App.js

function App() {
  return (
    <div>
      <NavigationBar />
      <Home /> 
      // Here you're rendering homepage that's why it is rendering again and again.
      <Routes>
        <Route exact path="/" element={<Home />}/>
        <Route exact path="/register" element={<Register />}/>
        <Route exact path="/signin" element={<SignIn />}/>
      </Routes>
    </div>
  );
}

CodePudding user response：

Look your App.js file You are calling Home component twice, first statically and second in "/" Route. So for fix that issue: Remove <Home /> from below <NavigationBar />.