I have 4 components: App.js, navbar.js, signIn.js, signUp.js. The goal is to have the navbar display at the top of every page the user visits. Currently, the links in the navbar only work on the homepage and are disabled on other pages.
I attempted to resolve this issue by installing react-bootstrap via npm instead of using cdn, but it did not solve the problem. Additionally, I tried creating a new set of components named "NavigationLinks.js", however, that approach also failed. I am unsure of what else to try.
Below are the relevant files:
App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/layout/navbar'
import Dashboard from './components/feed/dashboard'
import SignIn from './components/auth/signIn'
import SignUp from './components/auth/signUp'
import { BrowserRouter, Switch, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="App">
<Navbar/>
<Switch>
<Route exact path="/" component={Dashboard}/>
<Route path="/signin" component={SignIn}/>
<Route path="/signup" component={SignUp}/>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
Navbar.js
import { Switch, Route, Link} from 'react-router-dom';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
//import './navbar.css';
class navbar extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to='/'>Rekindle</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signup">
<Nav.Link as={Link} to="/signup" >Sign Up</Nav.Link>
</NavItem>
<NavItem eventkey={1} href="/signin">
<Nav.Link as={Link} to="/signin" >Login</Nav.Link>
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
{/*this div works for the routing */}
<div>
</div>
</div>
);
}
}
export default navbar;
The code compiles successfully, but the issue remains with navigating back to the homepage from the signIn and signUp routes.