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 (
<div>
<h1>about</h1>
</div>
)
}
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.
if you use older version import Switch from react-router-dom
import About from "./Container/about";
import Profile from "./Container/profile";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Switch>
<Route component={About} path="/about" />
<Route component={Profile} path="/profile" />
</Switch>
</Router>
</div>
);
}
export default App;
if you using latest version ..import Routes from react-router-dom App.js import Routes
import About from './Container/about'
import Profile from './Container/profile'
import {BrowserRouter as Router,Routes, Route} from 'react-router-dom'
function App() {
return (
<Router>
<div className="App">
<Routes>
<Route exact path='/about' element={<About />} />
<Route exact path='/profile' element={<Profile /> } />
</Routes>
</div>
</Router>
);
}
export default App;
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.