Hi, I am quite confuse, what is the difference between Link and LinkContainer? Thank you in advance
Irina Answered question June 26, 2023
In React Router Bootstrap, both Link
and LinkContainer
components are used for navigation purposes, but they serve different purposes and are used in different scenarios.
Link
:- The
Link
component is provided by the React Router library. It is used to create hyperlinks that navigate between different routes in your application. - When a user clicks on a
Link
component, it triggers a navigation event, updating the URL and rendering the corresponding component for the specified route. - Example usage:
import { Link } from 'react-router-dom'; const MyComponent = () => ( <Link to="/about">Go to About</Link> );
- The
LinkContainer
:- The
LinkContainer
component is provided by React Router Bootstrap. It is specifically designed to be used in conjunction with Bootstrap navigation components, such asNav
,NavItem
,NavLink
, etc. - It acts as a wrapper that converts the Bootstrap navigation components into React Router
Link
components, enabling navigation within your application. - Example usage:
<code>
import { Nav, NavItem } from 'react-bootstrap'; import { LinkContainer } from 'react-router-bootstrap'; const MyComponent = () => ( <Nav> <LinkContainer to="/about"> <NavItem>About</NavItem> </LinkContainer> </Nav> );
- The
In summary, Link
is a core component provided by React Router for general navigation, while LinkContainer
is a component provided by React Router Bootstrap that allows you to use React Router’s Link
components within Bootstrap navigation components.
Irina Answered question June 26, 2023