CODEWITHSUNDEEP
reactjsreact-router
Pradhumn Sharma
Pradhumn Sharma

Reputation: 1949

How does React router works and what is the difference between <link> and<Route>

What is the difference between Link and Route in react router? Where do we use them or do we use them together or separately? Where can I find genuine and professional React web development tutorial?

Upvotes: 16

Views: 21525

Answers (5)

alaboudi
alaboudi

Reputation: 3413

The Route and Link components are meant to be used together to accomplish certain tasks related to the URL of an application. Firstly, the React Router library is intended to achieve two things: 1. Ensures that state transitions are captured in the URL bar. 2. Ensures that the application starts from a proper state according to a stateful URL address.

Role of Link Component The Link component is a way to transition the route state in the application. So if you click a Link component, a route state will be activated changing the URL path accordingly. For example:

<Link to="/example" />

will register that the URL path of the application is at '/example'.

Role of Route Component At this point, it is up to the Route component to render the appropriate UI content according to the URL as such:

<Route path="/example" component={Example} />

So in a nutshell, the Link component is responsible for the transition of the route (page to page), while the Route component acts as a switch to display different components based on the route state.

The best example of the router library usage can be found at React Training.

Upvotes: 20

Sachin Kumar Verma
Sachin Kumar Verma

Reputation: 31

In Layman's terms we could understand the difference as mentioned below:

a)Routes are responsible for rendering UI when its path matches current URL where as Links are similar to anchor tags in HTML which are used to access the route paths.

b) Routes involve components within it where as Links involve just the path which is already defined by the routes

c) Routes are independent entities where as Links are dependent on Routes.

Upvotes: 3

Abdulhakim
Abdulhakim

Reputation: 758

A less tehcnical explanation:

  1. Route helps to build routes. Creating a route one time is enough. For example:
    <Route exact path="/articles"> <Articles /> </Route>

means that "/articles" route is created and you do not have to create it again in other components. That's why generally Route goes inside the main component, which is generally "App".

  1. Because of the first reason above, you will then need to use a linking tag in other components if you want to visit "/articles". If we use "a" tag, it will make the browser to send a fresh whole new html page. And this is what we do not want because we want only some parts (aka "component") of webpage to change, not all page.

Upvotes: 1

Ajay Banstola
Ajay Banstola

Reputation: 93

I will explain by an Example, If I have:

<Router>
        <Route path = "/" component = {LoginModule} />
        <Route path = "/Register" component = {RegisterModule}/>
</Router>

Here if i go to URL localhost:3000, it will render the Login Module. No doubt in that.

But if I go to URL localhost:3000/Register, it will render both login and register module below the login module on the same page. It is because /Register also has '/' in it.

This can be solved by:

<Router>
        <Route exact = {true} path = "/" component = {LoginModule} />
        <Route path = "/Register" component = {RegisterModule}/>
</Router>

Upvotes: 2

Christian
Christian

Reputation: 215

Link and Route

<Link/> is the element you could use to navigate through routes.

<Route/>, its most basic responsibility is to render some UI when a location matches the route’s path.

They are used separately. Link is dependent to Route's locations. But Route can be used without Link.

React Router: https://reacttraining.com/react-router/web/guides/philosophy

React JS Tutorial: https://reactjs.org/docs/hello-world.html

Upvotes: 8

Related Questions