score:0

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.

score:0

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.

score:2

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>

score:7

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

score:13

The Route and Link components are meant to be used together to accomplish different tasks in the 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 when the visited through a stateful URL address.

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

<Link to="/example" />

will register that the application is in the '/example' state. At this point, it is up to the component to render the appropriate content as such.

<Route path="/example" render={Profile] /> 

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

The best example of the library usage can be found at https://reacttraining.com/react-router/


Related Query

More Query from same tag