Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
React.js routing
Before React Router v4, the routing in react was static but after v4 update its dynamic. In single page applications, we have only one page index.html and different components which gets displayed based on routes.
In non spa web applications, server returns a page on request. To start with routing , first install the routing package −
npm install –save react-router-dom
Once we create the create the project with create-react-app, we will see there is only one html file and that is index.html and a single component named as App
Now, we will create two more components AboutUs.jsx and ContactUs.jsx
AboutUs.jsx
import React from 'react'
class AboutUs extends React.Component {
render() {
return <h1> About us </h1>
}
}
export default AboutUs;ContactUs.jsx
import React from 'react';
class ContactUs extends React.Component {
render() {
return <h1> Contact us </h1>
}
}
export default ContactUs;App.jsx
import React from 'react'
class App extends React.Component {
render() {
return (
<div>
<h1>Home</h1>
</div>
)
}
}
export default App;We have now three components App, AboutUs, ContactUs.jsx
We will add the three components in index.jsx file.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'))Route, Link, BrowserRouter are the three components which we will import from react-router –dom to implement the routing.
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
ReactDOM.render(<App />, document.getElementById('root'));For each route we will need to elements to specify the action.
- Path
- Component which handle that path
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
< BrowserRouter >
<div>
<Route path="/" component={App} />
<Route path="/aboutus" component={ AboutUs } />
<Route path="/contactus" component={ ContactUs } />
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'))Now, if save all files and run npm start to see the actions.
If we go to localhost:300/aboutus => we will see the about us page
Similarly localhost:300/contactus => display contact us page
But if you have noticed, the home component is also getting displayed on every other path as well. This is because there is ‘/’ in other paths as well which is not checked exactly.
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ ContactUs’;
const routs = (
<Router>
<div>
<Route exact path="/" component={App} />
<Route path="/aboutus" component={Users} />
<Route path="/contactus" component={Contact} />
</div>
</Router>
);
ReactDOM.render(routs, document.getElementById('root'));We have added the exact keyword in path of App component.
Now, if we run the application and see abouts and contactus we will see only those components and home component will not be added into their view.
2K+ Views
