带有的空白页

Question

使用链接时，我会得到一个空白页。 我应该看到事件，日期，Accueil 我使用了最后一个版本的React-Router。 我不知道我是否必须删除？

这是我的代码：

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
// import Header from './components/Header';
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';



function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>

    <nav>
      <ul>

        <li><Link to="/events">Events</Link></li>
        <li><Link to="/date">Date</Link></li>
        <li><Link to="/accueil">Accueil</Link></li>

      </ul>
    </nav>
    <BrowserRouter>
      <Routes>
        <Route path='/Events' element={<Events/>}/>       
      </Routes>
    </BrowserRouter>

    </div>
  );
}



export default App;

谢谢你！

Answer 1

似乎可能导致错误，因为链接必须是路由器（Browserrouter）组件的后代。

import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <nav>
      <ul>
        <li><Link to="/events">Events</Link></li>
        <li><Link to="/date">Date</Link></li>
        <li><Link to="/accueil">Accueil</Link></li>
      </ul>
      </nav>
      <Routes>
        <Route path='/Events' element={<Events/>}/>       
      </Routes>
    </div>
    </BrowserRouter>
  );
}