I am new to React. It's My First Program with React - Router When I Am Using React-Router I Don't get any data displaying on the window. It only Shows Blank Page.

My code - profile.js

import React from 'react'
 function Profile()
 { return ( <div>
   <h1>profile</h1> 
   </div> ) }

export default Profile

about.js file

import React from 'react' function About() { return (

about

)} export default About

App.js

import About from './Container/about'
import Profile from './Container/profile'
import {BrowserRouter, Route} from 'react-router-dom'
function App() {
 return ( 
<div className="App"> 
<BrowserRouter> 
<Route element={About} path='/about' /> 
<Route element={Profile } path='/profile' /> 
</BrowserRouter> 
</div> 
); 
}

export default App;

If anybody Know any Solution Please Reply

I Checked some websites for results but I Don't get any solution from them. I watched some Youtube videos. but they code the same as mine and they got results but I didn't.

CodePudding user response：

App.js import Routes

    import About from './Container/about'
    import Profile from './Container/profile'
    import {BrowserRouter,Routes, Route} from 'react-router-dom'
    function App() {
     return ( 
<BrowserRouter> 
    <div className="App"> 
      <Routes>
        <Route exact path='/about' element={<About />}  /> 
        <Route exact path='/profile' element={<Profile /> }  /> 
      </Routes>
    </div> 
 </BrowserRouter> 
    ); 
    }
    
    export default App;

CodePudding user response：

You can use Switch from react-router-dom which renders the route exclusively.

Your code would be like this.

import About from "./Container/about";
import Profile from "./Container/profile";
import { BrowserRouter, Route, Switch } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route component={About} path="/about" />
          <Route component={Profile} path="/profile" />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Check this sandbox where react-router-dom is implemented with dynamic params as well as components.