I have been working on this code and the browser router is not working. the output is simply empty-CodePudding

import { useState } from 'react';
import About from './Container/About';
  import Profile from './Container/Profile';
 import {BrowserRouter as Router,Route} from 'react-router-dom'

 function App() {
  const [state,setState] = useState('Data')



  return (
   <div >
   <button onClick={()=>setState('About')} >About</button>
   <button onClick={()=>setState('Profile')}>Profile</button>
   {state}

   <Router>
    <Route element={<About/>} path='/about' />
 
     </Router>
   </div>
  );
  }

  export default App;

Why is the browser router is not working as it is showing nothing in the output? Why is the browser router is not working as it is showing nothing in the output?Why is the browser router is not working as it is showing nothing in the output?Why is the browser router is not working as it is showing nothing in the output?

CodePudding user response：

You need to update the navigation path in order to make this work. Currently you are only updating your state, which is completely decoupled from React Router.

You can either add a link component or naviagate programmatically.

The following should work in your case

import { useNavigate } from "react-router-dom";
[...]
let navigate = useNavigate();
[...]
<button onClick={()=>{ setState('About'); navigate('/about'); } } >About</button>

Or if you don't need the state for anything other than the navigation, you can remove it and replace your buttons with React Router Link components.

CodePudding user response：

The router component maintains it's own state and routing context. You need to either use a Link component or the navigate function to issue an imperative navigation action. Don't forget that all the Route components need to be wrapped by the Routes component so route path matching and rendering functions.

Example:

import About from './Container/About';
import Profile from './Container/Profile';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <div >
      <Router>
        <Link to='/'>Home</Link>
        <Link to='/about'>About</Link>
        <Link to='/profile>Profile</Link>
        <Routes>
          <Route element={<h1>Home</h1>} path='/' />
          <Route element={<About />} path='/about' />
          <Route element={<Profile />} path='/profile' />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

If you decide to use the useNavigate hook to access the navigate function in this App component then the Router will need to be higher in the ReactTree in order for the useNavigate hook and routing components in App to be able to access the routing context.