Javascript 路由时reactrouterdom黑屏

我在try react 路由，但无法使其正常工作.我只剩下一个空洞的新项目，只是为了测试基本原理，但仍然无法让它运行.我正在使用vscode，并使用npx生成了我的Reaction项目.这是我当前的代码:

App.js个

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import './App.css';
import Landing from './components/Landing'

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Landing />} />
      </Routes>
    </BrowserRouter>
  );
}

index.js个

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我的landing.js只是一个文本条目，我已经确认如果没有BrowserRouter包装器，它确实可以工作.

我试过了:

• 在<BrowserRouter>中添加<h1>Hello</h1>，以查看它是否会在路由之前呈现--它没有.
• 不同的语法(Component与Element关键字，不同路径)
• 将index.js保留为默认值，并在App.js中执行工艺路由
• 将App.js保留为缺省值，并在index.js中的渲染函数内进行路由

我在REACT-ROUTER-DOM@6网上找到的所有资源都表明这个(或我所做的一些迭代)是正确的，然而，一旦我在<BrowserRouter>内换行，无论我做什么，我都会得到一个空白屏幕.

在这一点上，任何帮助都将是无价的；我认为我自己无法继续下go .