React url change but components not rendered until manual refresh

user_14476352 0
Viewed 1677

Hi im new to react and the routers. The problem is when I click on a link the URL at the top changes so I can tell that something is happening. But the page does not refresh automatically and so the new components arent rendered hen I click on it. If I manually refresh the page in chrome it will then render the correct components for the link. Not sure why this is happening.

Also I'm not sure if this has any affect on it but I do have a back end node js server and MongoDB data base this isn't just a front end react page. Im not sure if that has any affect? the functions of the nodejs server and Mongodb work it just doesn't refresh. Im not sure if that is relevant.

import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'; 
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Register from './Components/Register';
import Login from './Components/Login'; 
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar'; 
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";

function App() {

const[getDefault , setDefault] = useState(String); 





 return (
  <div className="App">


  <h1>react app</h1>
  <Navbar/>
  <BrowserRouter> 
  <div className="App">
  
    
      <Switch>
      <Route path='/app/' component={Register} exact /> 
      
      <Route path='/app/login/' component={Login} exact/> 
        
      <Route path='/app/notes/' component={Notes} exact/> 
      </Switch>
      
  
  
</div>
</BrowserRouter>
  

  
  </div>
  );
 }
  /*
 <div className='row'>
        <div className='col-md-6'>
          <Register/> 
        </div> 
        <div className='col-md-6'>
          <Login/>
        </div>
      </div>

      <div className ='row justify-content-center' >
        <div className='col-md-8 '>
          <Notes/>
        </div>
      </div>

     */
     export default App;

import React, {useState} from 'react'; 
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';

function Navbar() {
    return (<div>
           <p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
            <div className ='navbarOptions' style={{backgroundColor:'black'}}> 
        
            <BrowserRouter>
            <ul>
                <Link to='/app/' exact style={{  fontSize:'30px', color: '#48c6ef',  fontWeight: '700'}}>
                    
                    <li >
                        Register
                    </li>
                    
                    
                </Link>
                <Link to='/app/login/' exact  style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>
                    <li>
                        Login
                    </li>
                    
                </Link>

                <Link to='/app/notes/'  exact style={{fontSize:'30px', color: '#48c6ef' ,  fontWeight:'700'}}>
                    <li >
                        Notes
                    </li>
                    
                </Link>

            </ul>
            </BrowserRouter>
           
            </div>
        </div>
    ); 
    
}
export default Navbar ;

Here it shows login in the URL but is still rendering notes when I refresh the page it will show notes

react-router-dom reactjs javascript
3 Answers

You don't need to use browserrouter in the navlink, only use in router and also put the BrowserRouter before the switch

Like this:-

import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'; 
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Register from './Components/Register';
import Login from './Components/Login'; 
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar'; 
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";

function App() {

const[getDefault, setDefault] = useState(''); 


 return (
  <div className="App">
    <h1>react app</h1>
    
      <Navbar/>
      <div className="App">
<BrowserRouter> 
        <Switch>
          <Route path='/app/' component={Register} exact /> 

          <Route path='/app/login/' component={Login} exact/> 

          <Route path='/app/notes/' component={Notes} exact/> 
        </Switch>
</BrowserRouter>
      </div>
    
  </div>
  );
}

export default App;
user_135341670

Remove BrowserRouter in your navbar component. I think that should work, normally we have to use BrowserRouter once.

user_144728750

BrowserRouter should wrap all route things, that means that you should put the links within the Browser Router

import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'; 
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Register from './Components/Register';
import Login from './Components/Login'; 
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar'; 
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";

function App() {

const[getDefault, setDefault] = useState(''); 


 return (
  <div className="App">
    <h1>react app</h1>
    <BrowserRouter> 
      <Navbar/>
      <div className="App">

        <Switch>
          <Route path='/app/' component={Register} exact /> 

          <Route path='/app/login/' component={Login} exact/> 

          <Route path='/app/notes/' component={Notes} exact/> 
        </Switch>
      </div>
    </BrowserRouter>
  </div>
  );
}

export default App;

import React, {useState} from 'react'; 
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';

function Navbar() {
    return (
    <div>
      <p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
      <div className ='navbarOptions' style={{backgroundColor:'black'}}> 
        
        <ul>
          <Link to='/app/' exact style={{  fontSize:'30px', color: '#48c6ef',  fontWeight: '700'}}>Register</Link>
          <Link to='/app/login/' exact  style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>Login</Link>

          <Link to='/app/notes/'  exact style={{fontSize:'30px', color: '#48c6ef' ,  fontWeight:'700'}}>Notes</Link>

        </ul>
           
      </div>
    </div>
    ); 
    
}
export default Navbar ;

user_24435090
Related