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.

CodePudding user response：

To use Link of react-router-dom inside a component. you have to ensure your component or your whole app is wrapped under BrowserRouter. which is also a component of react-router-dom

Try this.

import { Link, BrowserRouter as Router } from 'react-router-dom';

export default function Navbar(props) {
    return (

        <div>
         <Router>
            <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>
          </Router>
        </div>
    )
}

CodePudding user response：

import { Route, BrowserRouter as Router, Routes, Navigate} from "react-router-dom";
import "./App.css";
import Mainpanel from "./Mainpanel";
import Login from "./Components/Login";
import Registration from "./Components/Registration";
import PrivateRoute from "./PrivateRoute";
import React from "react";
import AuthProvider from "./AuthContext/AuthContext";
function App() {
  return (
    <div className="App">
      <Router>
        <AuthProvider>
          <Routes>
            <Route
              path="/*"
              element={
         <PrivateRoute>
           <Mainpanel />
         </PrivateRoute>
         }/>
        <Route path="/signin" element={<Login />} />
        <Route path="/signup" element={<Registration />} />
        <Route path="/" element={<Navigate to="/dashboard" replace />} />
       </Routes>
      </AuthProvider>
     </Router>
   </div>
);
}
        
export default App;

you need to wrap all your routs in between <Router></Router> in app.js file