反應路由器和路由不起作用，我無法導航到博客頁面

Question

反應路由器和路由不起作用，我無法導航到博客頁面。 App.js - 以下代碼片段包含 App.js 和路由器。 由於最新版本的 react js，我無法使用 switch。

import './App.css';
import React,{Component} from 'react';
import { Navbar,Nav,Container,Row,Col,Button } from 'react-bootstrap';
import {Navigation} from './navbar/navbar.js';
import Luckywheel from './luckywheel/luckywheel';
import Luckymessage from './luckywheel/luckymessage';
import {Routes , Route , BrowserRouter as Routers} from 'react-router-dom'
import Blogs from './tools/blogs';

function App() {
  return (
    <div className="App">
      <h1 className='heading'>LUCKY DRAWER</h1>
     
    <Routers> 
    <Navigation /> 
      <Luckywheel />
     <Luckymessage />
    
      <Routes>
        <Route path='blogs'  component={Blogs} />
        <Route path='/' exact component={App} />
   
      </Routes>
     
     
    
     </Routers>
     </div>
  );
}

export default App;

Navbar.js - 此文件包含導航欄代碼

import React ,{Component} from 'react';
import { Navbar,Nav,Container,NavDropdown, } from 'react-bootstrap';


export function Navigation () {
 return(
  
<Navbar bg="dark" variant="dark">
    <Container>
    
    <Navbar.Brand href='blogs'>Blogs</Navbar.Brand>
    <Navbar.Brand href='/'>Home</Navbar.Brand>
    
    
    </Container>
  </Navbar>    

 )
}

export default Navigation;

Answer 1

在react-router-dom v6 中， Route組件 API 發生了顯着變化。 它不再需要component或render或children function 道具，全部替換為采用ReactElement （又名 JSX ）的單個element道具。

路線和路線

declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactElement | null; index?: boolean; path?: string; }

從component交換到element prop 並將路由組件作為 JSX 傳遞。

<Routes>
  <Route path='blogs' element={<Blogs />} />
  <Route path='/' element={<App />} />
</Routes>

Answer 2

安裝 npm i react-router-dom@5.2.0 與交換機一起工作