Navlink 没有路由到组件并且折叠不起作用

Question

所以我在我的基本反应项目中添加了一个导航栏，当屏幕为 sm 时出现折叠我想点击折叠以显示导航栏但是当我点击按钮时它不起作用一切都消失了

我还尝试将导航栏路由到我的组件之一，但它不起作用

*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;

Answer 1

据我所知，您在使用 v6 时混淆了 react-router-dom v5 路由语法。

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

在 react-router-dom 的第 6 版中，Route 组件不再采用 component 或 render 属性，而是在 element 上渲染路由组件道具 as JSX。更新后的路由代码可以按如下方式工作：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/menu" element={<Menu />} />
  <Route path="/contact" element={<Contact />} />
  <Route path="/about" element={<About />} />
</Routes>

在 v6 中，路由总是完全匹配的，element prop 采用 JSX 文字，或 ReactElement.

如果出于某种原因您 实际上 仍在使用 v5 并且只是混合在 v6 Routes 组件中，请切换回使用 Switch 组件。 Switch 在 v6.

中被 Routes 取代

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>

Navlink 没有路由到组件并且折叠不起作用

Navlink is nor routing toward component and collapse is not working

reactjs

react-router

react-router-dom

reactstrap