I am getting this error in my react application, because I am using router inside router. I have to use the second router in Navbar.js to use <Link>
. I am using react router in 2 different files. If i remove one of them it will throw an error saying <Link>
is not defined.
This is my Code: App.js
import { useState } from 'react';
import './App.css';
import Alert from './components/Alert';
import About from './components/About';
import Navbar from './components/Navbar';
import {
BrowserRouter as Router,
Route,
Routes,
Link
} from "react-router-dom"
import TextForm from './components/TextForm';
function App() {
const [mode, setMode] = useState("light");
const [alert, setAlert] = useState(null);
const showAlert = (message, type, symbolID, directory) => {
setAlert({
msg: message,
type: type,
symbolID: symbolID,
directory: directory
})
setTimeout(() => {
setAlert(null);
}, 2100);
}
const toggleMode = () => {
if(mode === "light"){
setMode("dark")
document.body.style.backgroundColor = "rgb(21 25 30)";
document.body.style.color = "white"; // #dadce0
showAlert("Dark Mode has been Enabled", "success", "check-circle-fill", "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z");
}
else {
setMode("light")
document.body.style.backgroundColor = "white";
document.body.style.color = "black";
}
}
return (
<>
<Router>
<Navbar title="TakhtiUtils" mode={mode} toggleMode={toggleMode}/>
<Alert alert={alert}/>
<Routes>
<Route path="/About" component={About}>
<About/>
</Route>
<Route path="/" component={TextForm}>
<TextForm mode={mode} showAlert={showAlert} heading="Enter Some Text:"/>
</Route>
</Routes>
</Router>
</>
);
}
export default App;
And this is Navbar.js:
import React from 'react'
import {
BrowserRouter as Router,
Link
} from "react-router-dom"
export default function Navbar(props) {
return (
<Router>
<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
<div className="container-fluid">
<a className="navbar-brand" href="/">{props.title}</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
</ul>
</div>
</div>
<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">Dark Mode</label>
</div>
</nav>
</Router>
)
}
Please tell me a way to use one react router in both of the components. Thank You!
CodePudding user response:
you should not use other Router in the Navbar It seems you need to use NavLink in Navbar
import {Link, NavLink} from "react-router-dom";
<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>