This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Sachin Kumar Singh
In this tutorial we are going to discuss how to get started with react router version 6 to navigate and render multiple componets in your single page application(spa)
Prerequisites
- A Basic React application
- Basic knowledge of react
Install React Router
The first step after creating a react app is to install react router
To install the react router open your command line and type below code and hit enter to install react router@6
npm install react-router-dom@6
if you are using yarn then
yarn add react-router-dom@6
Setup React Router
The setup of react router is very simple. Navigate to your src folder and open index.js file after then import BrowserRouter from 'react-router-dom' and wrap the root component with this.
After doing so your index.js file may look like this
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
How To Route the other Componets
We are done with the inital setup and now we can create routes for other componets to render follow me
Create Mutiple components to Route
Now we are creating multiple components like home.js signup.js and about.js etc.
import React from 'react'
function Contacting() {
return (
<div className="bg-danger">
<p>This is the contact page</p>
</div>
)
}
export default Contacting
Contact.js
import React from 'react'
function AboutUs() {
return (
<div className="bg-primary">
<p>This is the about page</p>
</div>
)
}
export default AboutUs
About.js
function HomePage() {
return (
<div className="bg-success">
<p>This is the home page</p>
</div>
);
}
export default HomePage
Home.js
Defining Routes
Now open app.js file and define the routes and path for specific component to render
import { Routes, Route } from "react-router-dom"
import HomePage from "./Home.js"
import AboutUs from "./About.js"
import Contacting from "./Contact.js"
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={ <HomePage/> } />
<Route path="aboutus" element={ <AboutUs/> } />
<Route path="contacting" element={ <Contacting/> } />
</Routes>
</div>
)
}
export default App
use Link tag provided by react-router-dom to navigate around
import { Link } from "react-router-dom";
function Home() {
return (
<div>
<h1>This is the home page</h1>
<Link to="aboutus">Click to view our about page</Link>
<Link to="contacting">Click to view our contact page</Link>
</div>
);
}
export default Home;
That's all for this tutorial now we can play around with react router in your react app.
Note:-This will work only for react router version 6
follow me on github to get more tutorial like this
Sachinsingh101 (Sachin Kumar Singh) · GitHub
Programmer | Developer | Learner | Typist | Editor - Sachinsingh101
github.com
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Sachin Kumar Singh
Sachin Kumar Singh | Sciencx (2022-11-02T03:15:43+00:00) React Router Version 6 Tutorial How to Set up React Router@6. Retrieved from https://www.scien.cx/2022/11/02/react-router-version-6-tutorial-how-to-set-up-react-router6/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.