So i Have added a navbar in my basic react project, when the screen is sm there appears a collapse i want to click on the collapse to show the navbar but its not working when I click on the button everthing goes away
And also i tried to route the navbar to one of my component but it doesn't work
import React from 'react';
import './App.css';
import MainComponent from './components/MainComponent';
import {BrowserRouter} from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<MainComponent />
</BrowserRouter>
);
}
export default App;
Navigation.js
import React, {Component} from 'react';
import { Navbar, NavbarBrand, Nav, NavItem , NavbarToggler,Collapse } from 'reactstrap';
import {Link} from 'react-router-dom';
class Navigation extends Component {
constructor(props){
super(props);
this.state={
isNavopen:true
}
}
navToggle = () => {
this.setState({
isNavopen : !this.state.isNavopen
})
}
render(){
return (
<div>
<Navbar dark color="danger" expand="sm">
<div className="container">
<NavbarToggler onClick={this.navToggle}/>
<NavbarBrand href="/">Game of The year 2021</NavbarBrand>
<Collapse isOpen={this.state.isNavopen} navbar>
<Nav className="me-auto" navbar>
<NavItem>
<Link to="/" className="nav-link acitve">Home</Link>
</NavItem>
<NavItem>
<Link to="/menu" className="nav-link ">Menu</Link>
</NavItem>
<NavItem>
<Link to="/about" className="nav-link ">About</Link>
</NavItem>
<NavItem>
<Link to="/contact" className="nav-link ">Contact</Link>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
</div>
);
}
}
export default Navigation;
Body.js
import React from 'react';
import Menu from './Menu';
import Home from './Home';
import Contact from './Contact';
import About from './About';
import { Route,Routes,Redirect } from 'react-router-dom';
const Body = () => {
return (
<div>
{/* <Menu /> */}
<Routes>
<Route path="/" exact component={Home}/>
<Route path="/menu" exact component={Menu}/>
<Route path="/contact" exact component={Contact}/>
<Route path="/about" exact component={About}/>
</Routes>
</div>
);
}
export default Body;
From what I can tell you are mixing up the react-router-dom
v5 route syntax when you are using v6.
<Routes>
<Route path="/" exact component={Home}/>
<Route path="/menu" exact component={Menu}/>
<Route path="/contact" exact component={Contact}/>
<Route path="/about" exact component={About}/>
</Routes>
In version 6 of react-router-dom
the Route
components no longer take component
or render
props, and instead render the routed components on the element
prop as JSX. The updated routing code could work as following:
<Routes>
<Route path="/" element={<Home />} />
<Route path="/menu" element={<Menu />} />
<Route path="/contact" element={<Contact />} />
<Route path="/about" element={<About />} />
</Routes>
In v6 routes are always exactly matched, and the element
prop takes a JSX literal, or ReactElement
.
If for some reason you are actually still on v5 and just mixed in the v6 Routes
component, switch back to using the Switch
component. Switch
was replaced by Routes
in v6.
import { ..., Switch, ... } from 'react-router-dom';
<Switch>
<Route path="/menu" component={Menu}/>
<Route path="/contact" component={Contact}/>
<Route path="/about" component={About}/>
<Route path="/" component={Home}/>
</Switch>