How to add React Routing in your React app ?

Bellow steps you can Follow.

1- create project : npx create-react-app my-app

2- npm i react-router-dom react-router — save

3- index.js create

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import reportWebVitals from ‘./reportWebVitals’;

import Routing from “./Component/Routing”;

import Nav from “./Navigation”;

import {BrowserRouter, Route, Switch,Link } from ‘react-router-dom’;

ReactDOM.render(

<React.StrictMode>

<BrowserRouter>

<Nav/>

<Routing />

</BrowserRouter>

</React.StrictMode>,

document.getElementById(‘root’)

);

reportWebVitals();

4- Rouuting.js create

import React from “react”;

import { BrowserRouter, Route, Switch,Link } from ‘react-router-dom’;

import Home from “./Home”;

import Login from “./Authentication/Login”;

import Registration from ‘./Authentication/Registration’;

import Message from “./TextMessage/TextMessage”

import Chat from “./Chat/ChatScreen”;

import Navigation from “./Navigation/Navigation”;

function Routing() {

return (

<div >

<Switch>

<Route path=”/” component={Home} exact />

<Route path=”/registration” component={Registration} />

<Route path=”/login” component={Login} />

<Route path=”/msg” component={Message} />

<Route path=”/record” component={Chat} />

</Switch>

</div>

);

}

export default Routing;

5- Navigation.js create

import React from ‘react’;

import PropTypes from ‘prop-types’;

import { makeStyles } from ‘@material-ui/core/styles’;

//import { Link } from ‘@material-ui/core’;

import { Link, Router , BrowserRouter} from ‘react-router-dom’;

const useStyles = makeStyles((theme) => ({

root: {

‘& > * + *’: {

marginLeft: theme.spacing(2),

},

},

}));

const Navigation = () => {

const classes = useStyles();

const preventDefault = (event) => event.preventDefault();

return (

<div>

<Link to = “/” >

Home

</Link>

<Link to=”/login”>

Login

</Link>

<Link to=”/registration” >

Registrationn

</Link>

<Link to=”/msg” >

Message

</Link>

<Link to=”/record” >

webRTC tutoring

</Link>

</div>

);

};

Navigation.propTypes = {

};

export default Navigation;

6- you can create other files

Home.js

Login.js etc