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

Question

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?

Answer 1

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/

Answer 2

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