谁能告诉我这段代码有问题吗？导航栏未显示答案

【问题标题】：Can anyone tell me problem with this code? Navbar is not getting displayed谁能告诉我这段代码有问题吗？导航栏未显示
【发布时间】：2022-08-23 13:59:38
【问题描述】：

在控制台中显示此错误： enter image description here

一切都很好，但导航栏没有显示上面的错误。

这是我的 App.js 文件

import Navbar from \'./components/Navbar\';
import \'./App.css\';
import AddEmployee from \'./components/AddEmployee\';
import { BrowserRouter, Route, Routes } from \'react-router-dom\';
import EmployeeList from \'./components/EmployeeList\';

function App() {
  return (
    <>
      <BrowserRouter>
        <Navbar/>
        <Routes>
          <Route index element={<EmployeeList/>}/>
          <Route path=\"/\" element={<EmployeeList/>}></Route>
          <Route path =\"/employeeList\" element={<EmployeeList/>}></Route>
          <Route path =\"/addEmployee\" element={<AddEmployee/>}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

导航栏.js

import React from \'react\'

const Navbar = () => {
  return (
    <div className=\"bg-gray-800\">
      <div className=\'h-16 px-8 flex items-center\'>
        <p className=\'text-white font-bold\'>Employee Management System </p>
      </div>
    </div>
  )
}
export default Navbar;

AddEmployee.js

import React, {useState} from \'react\'
import employeeService from \'../services/employeeService\';

const AddEmployee = () => {

    const [employee, setEmployee] = useState({
        id: \"\",
        firstName: \"\",
        lastName: \"\",
        emailId: \"\",
    })

    const handleChange = (e) => {
        const value = e.target.value;
        setEmployee({...employee,[e.target.name] : value});
    }
    
    const saveEmployee = e => {
        e.preventDefault();
        employeeService.saveEmployee(employee).then((response) =>{
            console.log(response);
        }).catch((err) => {
            console.log(err);
        })
    }

  return (
    <div className=\"flex max-w-2xl mx-auto shadow border-b\">
        <div className=\"px-8 py-8\">
            <div className=\"font-thin text-2xl tracking-wider\">
                <h1>Add New Employee</h1>
            </div>
            <div className=\"justify-center items-center h-14 w-full my-4\">
                <label className=\"block text-gray-600 text-sm font-normal\" >First Name</label>
                <input className=\"h-10 w-96 border mt-2 px-2 py-2\"
                 type=\"text\"
                 value = {employee.firstName}
                 onChange = {(e) => handleChange(e)}
                 name=\"firstName\"></input>
            </div>

            <div className=\"justify-center items-center h-14 w-full my-4\">
                <label className=\"block text-gray-600 text-sm font-normal\" >Last Name</label>
                <input className=\"h-10 w-96 border mt-2 px-2 py-2\" 
                type=\"text\"
                value = {employee.lastName}
                onChange = {(e) => handleChange(e)}
                name=\"lastName\"></input>
            </div>

            <div className=\"justify-center items-center h-14 w-full my-4\">
                <label className=\"block text-gray-600 text-sm font-normal\" >E-Mail</label>
                <input className=\"h-10 w-96 border mt-2 px-2 py-2\" 
                type=\"email\"
                value = {employee.emailId}
                onChange = {(e) => handleChange(e)}
                name=\"emailId\"></input>
            </div>

            <div className=\"justify-center items-center h-14 w-full my-4 space-x-4\">
                <button 
                className=\"rounded text-white font-semibold bg-red-600 px-6 hover:bg-green-500 py-2\"
                onClick={saveEmployee}>
                     Save
                </button>
                <button 
                className=\"rounded text-white font-semibold bg-orange-600 px-6 hover:bg-green-500 py-2\"
                > 
                Clear 
                </button>
            </div>
        </div>
    </div>
  )
}

export default AddEmployee;

它包含的内容不多，但只是检查是否有任何错误员工列表.js

import React from \'react\'

const EmployeeList = () => {
  return (
    <div>EmployeeList</div>
  )
}

export default EmployeeList;

当我使用 addEmployee 时，路由导航栏工作正常，但即使在那时这个错误仍然存在。

为什么你的第一个根中有 indek ？尝试不使用此行
你不能在<BrowserRouter> 中添加一个元素，如果你想让<Navbar> 出现在所有页面中，你应该将它添加到所有<Routes> 元素中
Navbar 导出/导入看起来是一致的。检查AddEmployee 和EmployeeList 的导出和导入一个或两个有问题，App 无法呈现。
@Philo 不，Navbar 里面的 BrowserRouter 是有效的。
@DrewReese 好的，非常感谢，这对我来说是一个新的重要信息

标签： javascript reactjs react-router

【解决方案1】：

确保 BrowserRouter 是 Return 中的第一个元素

<BrowserRouter>
   <>
      <Navbar/>
      <Routes>
      ....
   </>
</BrowserRouter>

【讨论】：