this is the error i'm getting,

```
Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>
at invariant (tiny-invariant.esm.js:12:1)
at Link.js:89:1
at updateContextConsumer (react-dom.development.js:21207:1)
at beginWork (react-dom.development.js:21652:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

```

given below is my original code written for creating a navbar,

```
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

export default function Navbar(props) {
    return (
        <div>
            <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
                <h3>{props.title}</h3>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav mr-auto">
                        <li className="nav-item active">
                            <Link to="/" className="nav-link">Home <span className="sr-only">(current)</span></Link>
                        </li>
                        <li className="nav-item">
                            <Link to="/about" className="nav-link">{props.aboutText}</Link>
                        </li>
                    </ul>

                    <div className={`form-check form-switch text-${props.mode === 'light' ? 'dark' : 'light'}`}>
                        <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
                        <label className="form-check-label" htmlFor="flexSwitchCheckDefault">Enable Dark Mode</label>
                    </div>
                </div>
            </nav>
        </div>
    )
}
// this acts as a check
Navbar.propTypes = {
    title: PropTypes.string.isRequired,
    aboutText: PropTypes.string.isRequired
}
// If the prop types are not passed and these values will be used as default placeholders
Navbar.defaultProps = {
    title: 'stranger',
    aboutText: 'hello there'
}
// ${props.mode==='light'?'dark':'light'} is used as an if else statement.

```

The problem in the code occurred after line number 17 & 20 when I started using the link to tag instead of a href.
can someone tell me where is the problem, and i'm using react-router-dom v5.