React 编译成功但未显示组件

Question

I am following one of the Udemy tutorials on building the React application. This project use tailwind and dasyui for styling. Currently, I am trying to render Navbar component, and here is my code:

Navbar.jsx

import { FaGithub } from 'react-icons/fa'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'

function Navbar({ title }) {
  return (
    <nav className='navbar mb-12 shadow-lg bg-neutral text-neutral-content'>
      <div className='container mx-auto'>
        <div className='flex-none px-2 mx-2'>
          <FaGithub className='inline pr-2 text-3xl' />
          <Link to='#' className='text-lg font-bold align-middle'>
            { title }
          </Link>
        </div>

        <div className='flex-1 px-2 mx-2'>
          <div className='flex justify-end'>
            <Link to='#' className='btn btn-ghost btn-sm rounded-btn'>
              Home
            </Link>
            <Link to='/about' className='btn btn-ghost btn-sm rounded-btn'>
              About
            </Link>
          </div>
        </div>
      </div>
    </nav>
  )
}

Navbar.defaultProps = {
  title: 'Github Finder',
}

Navbar.propTypes = {
  title: PropTypes.string,
}

export default Navbar

App.js

import React from 'react'
import {Router} from 'react-router-dom'
import Navbar from './components/layout/Navbar'

function App() {
  return (

    <Router>
      <div className="flex flex-col justify-between h-screen">
        <Navbar/>
        <main>Content</main>
      </div>
    </Router>
  )
}

export default App

Furthermore, here is my package.json file:

{
  "name": "github-finder",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "axios": "^0.27.2",
    "daisyui": "^2.31.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-router-dom": "^6.0.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^3.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.17",
    "tailwindcss": "^3.1.8"
  }
}

I was able to nmp start the app successfully, but the page is empty. Navbar seems not to be rendered. Here are the errors from browser console:

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

react-dom.development.js:18687 The above error occurred in the <Router> component:react-dom.development.js:18687

What should I do to solve those errors?

UPDATE 1:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

UPDATE 2:

Modified index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root'),
)

The issue is not solved. The errors are:

You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

react-dom.development.js:18687 The above error occurred in the <Router> component:

Answer 1

Try this way

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root'),
)

Check documentation here .