导航给我空白页

Question

一年前我只为一个小项目使用过一次ReactJS，但是现在我在设置导航时遇到了问题。旧项目上的导航正在运行，我发现有一个新版本的 react-router-dom，我尝试将更改实施到代码中，但仍然无法正常工作。我不知道为什么 :( 如有任何提示，我们将不胜感激。谢谢！

控制台错误：

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

The above error occurred in the <Route> component:

App.js:

import React from 'react';
import { BrowserRouter as Routes, Route } from "react-router-dom";
import {Nav} from './Nav';
import { Posts } from './Posts';

export function App() {
  return (
    <div className="App">
      <Nav/>
       <BrowserRouter>
          <Routes>
            <Route path="/" element={<App/>}/>
            <Route path="/posts" element={<Posts/>}/>
          </Routes>
       </BrowserRouter>
    </div>
  );
}

导航：

import React from 'react';
import {Link} from 'react-router-dom'
import Logo from '../images/Logo.png';

export function Nav(){
    return(
        <div id="nav">
            <img src={Logo} class="nav-logo" alt="logo"/>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link to="/Posts">Posts</Link>
                </li>
            </ul>
        </div>
    )
}

索引：

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


ReactDOM.render(
  <BrowserRouter>
      <Router>
        <Route path='/' element={<App/>}/>
      </Router>
  </BrowserRouter>
, document.getElementById("root"));

Answer 1

React-Router更新了很多，推荐阅读文档和通常不要在 index.js 文件中执行任何操作以在 App.js 文件

中进行路由

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './components/App';

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

App.js 文件

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import {Nav} from './Nav';
import { Posts } from './Posts';

export function App() {
  return (
    <div className="App"> 
       <BrowserRouter>
          <Nav/>
          <Routes>
            <Route path="/posts" element={<Posts/>}/>
            <Route path="*" element={<Navigate to="/posts" />} />
          </Routes>
       </BrowserRouter>
    </div>
  );
}

导航给我空白页

navigation is giving me blank page

reactjs

react-router