1st step
//create react app like this ==> npx create-react-app react-router-dom
2nd step
//instal react-router-dom ==> npm i react-router-dom or yarn add react-router-dom
and then open your text editor like 'sublime text 4',
//3rd step
create file named as 'src/Navbar.js',
and use this code.
import React from 'react'
import {Link} from 'react-router-dom'
const Navbar = () => {
return (
<div>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</div>
)
}
export default Navbar
create your pages like "Home ,ABout,Contact etc" I am just gonna go with "Home and About" ok :).
this is my home and about code
home :
import React from 'react'
const Home = () => {
return (
<div>
<h1>This Is home page</h1>
</div>
)
}
export default Home
and this is for about :
import React from 'react'
const Home = () => {
return (
<div>
<h1>This Is about page</h1>
</div>
)
}
export default Home
last step
//you have paste this code in app.js
import logo from './logo.svg';
import {BrowserRouter as Br,Route} from 'react-router-dom'
import Navbar from './Navbar'
import Home from './Home'
import About from './About'
function App() {
return (
<div className="App">
<Br>
<Navbar />
<Route exact path="/">
<Home />
</Route>
<Route exact path="/about">
<About />
</Route>
</Br>
</div>
);
}
export default App;
Top comments (0)