Login
React -Router
17 October 2024 at 05:08
Understanding Routes
React- Router is used for render the components depends on URL without reloading the browser page. It navigates a page to another page without page reloads. we can use router in react project, first we install the react-router-dom package from react.
Then, access the router using
import {BrowserRouter,Router,Routes} from 'react-router-dom';
after that we use link to diplay the browser using Link instead <a href=''> in react.
so,
import {BrowserRouter,Router,Routes,Link} from ‘react-router-dom’;
example for using Link and routes:
Using Links:
'/' is the root page it display default home page
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
<Link to='/contact'>Contact</Link>
}/> }> }/>
Using Routes:
<Browser Router>
<Router>
<Routes path='/' element={<Home/>}/>
<Routes path='/about' element={<About/>}>
<Routes path='/contact' element={<Contact/>}/>
</Router>
</Browser Router>
