Quick Recap | React Routing
routing basic Example | quick recap
React component with Basic Routing
In the src directory, create one component file called App.js and put the following code into it.
// App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h2>Welcome to React Router Tutorial</h2>
</div>
);
}
}
export default App;Now, in the main.js file, put the following into it.
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));The Router
There are two types of router object.
BrowserRouter
HashRouter
If we want to handle the dynamic request then use BrowserRouter and if we want to serve the static request then use HashRouter.
History
Every router creates history object to keep track of the current location of the page.
Rendering a
If we take our above example then it will look like this.
This is how we can render the BrowserRouter object.
Step 2: Make three components.
First, make one components directory and in that make Home.js component.
Second make About.js component.
Third make Contact.js component.
Step 3: Register the routes in the App.js file.
The final main.js file will look like this.
Our index.html file looks like this.
So, finally our output is working and you can navigate the routes and see according to that output is changing.React Router
Last updated
Was this helpful?