Routing in React.js - Get react.js Projects Help

These days many websites are actually made up of single page, they only look like multiple pages because of rendering of different components. These websites are known as SPAs-single page applications. In its core React Router is conditionally rendered (example:- '/' for homepage, '/about' for about page.

How to install it:

npx install react-router-dom

You'll need to import BrowserRouter, Routes, and Route from react-router-dom package:

       import React from 'react';
       import { BrowserRouter, Route, Routes } from 'react-router-dom';

Everything that will be render to the website has to be go inside BrowserRouter .

So wrap the App in BrowserRouter.

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, 
    document.getElementById('root'))

Add Routes in App which ensures us that whatever will be rendered one by one.

function App() {return (<main><Routes></Routes></main>)}

Add Route in Switch so that path of that component can set.

<Route path='/' element={<Home />} />

Many components path can be set using Route.

<Routes><Route path="/" element={Home} exact /><Route path="/about" component={About} /><Route path="/contact" element={Contact} /></Routes>

Now import All the components in App file.

import Home from './components/Home';
import About from './components/About';
import contact from './components/Contact';

Now App file will run.

Are you new to React.js or Just started learning and struggling with react.js project? We have team of react.js developer to help you in react.js project, assignment and for learning react.js at affordable price.

Send your request now