react-router-dom: Not routing to any jsx file-CodePudding

Hi I am a beginner in React development. I am trying import jsx file in app.js but it is not giving any preview in browser. Please take a look on the screenshoot. Component / jsx file out from the Router is prefectly loading here.

enter image description here enter image description here

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import './App.css';
import Footer from './components/Footer';
import Dashboard from './page/Dashboard'
import Scanner from './page/Scanner'
import { BrowserRouter as Router, Routes,Route,} from "react-router-dom";

function App() {
  return (
    <div className="App">
       <Router>
        <Routes>
          <Route path="/" page={Dashboard}/>
          <Route exact path="/dashboard" component={Dashboard}/>
          <Route exact path="/scanner" component={Scanner}/>
        </Routes>
      </Router>
      <Footer></Footer>
    </div>
  );
}

export default App;

CodePudding user response：

I see that you are using react-router-dom: 6.3.0. v6 doesn't support exact anymore you should change your code like this

<Route path="/" element={<Dashboard />}/>
<Route path="/dashboard" element={<Dashboard />}/>
<Route path="/scanner" element={<Scanner />}/>

CodePudding user response：

On the latest react version you should change your code like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import './App.css';
import Footer from './components/Footer';
import Dashboard from './page/Dashboard'
import Scanner from './page/Scanner'
import { BrowserRouter as Router, Routes,Route,} from "react-router-dom";

function App() {
  return (
    <div className="App">
       <Router>
        <Routes>
          <Route path="/" element={<Dashboard />}/>
          <Route exact path="/dashboard" element={<Dashboard />}/>
          <Route exact path="/scanner" element={<Scanner />} />
        </Routes>
      </Router>
      <Footer/>{/* you can also typr this footer component like this */}
    </div>
  );
}

export default App;