我创建了一个 React 项目并开始研究路由，路由工作正常但 Navbar 工作不正常

Question

! [My Output is shown like this. ]1。我创建了一个 React 项目，为了设计，我使用 Bootstrap 框架。我在我的项目中完成了路由。路由工作正常，但 Navbar 在我的反应项目中工作不正常。所以帮我解决这个问题。

这是App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './Pages/Home/Home';
import Edit from './Pages/Edit/Edit';
import Create from './Pages/Create/Create';
import Navbar from './Components/Navbar/Navbar';

function App() {
  return (
    <Router>
      <Navbar></Navbar>
      <div className="container">
        <h2>MERN</h2>
        <Route path='/' exact component={Home}></Route>
        <Route path='/id:/edit' component={Edit}></Route>
        <Route path='/create' component={Create}></Route>
      </div>
    </Router>
  );
}

export default App;

在 Components 文件夹中，我有 Navbar 文件夹，我有 Navbar 文件夹，我有 Navbar.js

在Navbar.js

import React, { Component } from "react";
import "./Navbar.css";
import { Link } from "react-router-dom";

export default class Navbar extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <a className="navbar-brand" href="www.facebook.com">
            Navbar
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-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 active">
                <Link to="/">Home</Link>
              </li>
              <li className="nav-item">
                <Link to="/create">Create</Link>
              </li>
              <li className="nav-item">
                <Link to="/id:/edit">Edit</Link>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

在 Pages 文件夹中我有三个文件夹 1)Home 2)Create 3)Edit

这是Home.js

import React, { Component } from "react";
import "./Home.css";

export default class Home extends Component {
  render() {
    return (
      <div>
        <p>Welcome to Home Component</p>
      </div>
    );
  }
}

这是Create.js

import React, { Component } from "react";

export default class Create extends Component {
  render() {
    return (
      <div>
        <p>Welcome to Create Component</p>
      </div>
    );
  }
}

这是Edit.js

import React, { Component } from "react";

export default class Edit extends Component {
  render() {
    return (
      <div>
        <p>Welcome to Edit Component</p>
      </div>
    );
  }
}

在我的反应项目中，路由工作正常，但导航栏工作不正常。如果我不清楚我的疑问，请发表评论。

Answer 1

我假设工作不正常，"active" class 没有改变。

为此，您可以使用 "NavLink" 而不是 react-router-dom 包中的 "Link"，并且不要将 "active" class 硬编码为<li>

import { NavLink } from 'react-router-dom';
...
                            <li className="nav-item">
                                <NavLink to='/' activeClassName="active">Home</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to='/create' activeClassName="active">Create</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to='/id:/edit' activeClassName="active">Edit</NavLink>
                            </li>
...

Answer 2

您是否尝试过在所有 <Route> 组件周围添加 Switch 组件？

您可以在第一个基本示例中找到与您要实现的目标类似的示例 here。

尝试：

<Router>
      <Navbar></Navbar>
      <div className="container">
        <h2>MERN</h2>
        <Switch>
            <Route path='/' exact component={Home}></Route>
            <Route path='/id:/edit' component={Edit}></Route>
            <Route path='/create' component={Create}></Route>
        </Switch>
      </div>
    </Router>

Answer 3

实际上您只是忘记将必要的 className 添加到您的链接。将 className="nav-link" 添加到 Navbar.js 中的链接。

    <ul className="navbar-nav">
      <li className="nav-item active">
        <Link to="/" className="nav-link">
          Home
        </Link>
      </li>
      <li className="nav-item">
        <Link to="/create" className="nav-link">
          Create
        </Link>
      </li>
      <li className="nav-item">
        <Link to="/id:/edit" className="nav-link">
          Edit
        </Link>
      </li>
    </ul>

我创建了一个 React 项目并开始研究路由，路由工作正常但 Navbar 工作不正常

I created one react project and I started working on Routing, Routing is working fine but Navbar is not working properly

reactjs