当我在 React JS 中使用路由器时没有任何显示

Question

我很难理解为什么当我在我的项目中使用路由器时没有任何显示（只是一个空白屏幕）。我只是像往常一样安装了 react-router-dom 。我试过更改版本但没有成功

这是 app.js 文件

import React from 'react';
import './App.css';
import navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
      <navbar />
      <Routes>
        <Route path="/" element={<navbar/>}/>
      </Routes>
    </Router>
    
    
  );
}

export default App;

这里是 navbar.js 文件：

import React, {useState} from 'react';
import { Link } from 'react-router-dom';
 
 function navbar() {
   return (
   <nav className='navbar'>
       <div className="navbar-container">
           <Link to='/' className='navbar-logo'>
                TRL<i className='fab fa-typo3'/>
           </Link>

       </div>



   </nav>
   );
 }
 
 export default navbar;

Answer 1

在JSX中，lower-case个标签名称被认为是HTML个标签。这就是为什么你需要将 navbar 组件的名称大写，否则 react.js 不会像其他有效的 JSX 那样对待它。它应该导入为 Navbar.

所以，您的 App.js 看起来像这样。

import React from 'react';
import './App.css';
import Navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Navbar/>}/>
      </Routes>
    </Router>
    
    
  );
}

export default App;

Answer 2

尽量让navbar组件大写为Navbar，也可以直接传element={Navbar}

您需要将组件名称大写，以便 JSX 理解它。 JSX 不知道这是一个 HTML 标签还是一个有效的 JSX，在这种情况下是一个组件。

导航js

 import React, {useState} from 'react';
 import { Link } from 'react-router-dom';

 function Navbar() {
  return (
    <nav className='navbar'>
       <div className="navbar-container">
           <Link to='/' className='navbar-logo'>
             TRL<i className='fab fa-typo3'/>
           </Link>
       </div>
    </nav>
   );
  }

 export default Navbar;

应用程序 js

import React from 'react';
import './App.css';
import Navbar from './components/navbar';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Router>
     <Navbar />
       <Routes>
          <Route path="/" element={<Navbar/>}/>
      </Routes>
    </Router> 
  );
}

export default App;

当我在 React JS 中使用路由器时没有任何显示

Nothing showing up when I use router in react js

reactjs

react-router

react-router-dom