導航給了我空白頁-有解無憂

一年前我只為一個小專案使用過一次 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:

應用程式.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"));

uj5u.com熱心網友回復：

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>
  );
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/450511.html

標籤：反应反应路由器

上一篇：使用打字稿描述功能道具

下一篇：陣列在ReactJS中洗牌