Search code examples
reactjsreact-routerreact-router-domreactstrap

Navlink is nor routing toward component and collapse is not working


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

*App.js*

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;

Solution

  • 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.

    Edit navlink-is-nor-routing-toward-component-and-collapse-is-not-working

    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>