react router 和 routes 不工作，我无法导航到博客页面

Question

反应路由器和路由不工作，我无法导航到博客页面。 App.js - 以下代码片段包含 App.js 和 router 。由于最新版本的 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

安装 npm 我 react-router-dom@5.2.0 使用 switch

Answer 2

在 react-router-dom v6 中，Route 组件 API 发生了显着变化。它不再需要 component 或 render 或 children 函数道具，全部由一个 element 道具取代，该道具需要 ReactElement (a.k.a.JSX).

Routes and Route

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 属性并将路由组件作为 JSX 传递。

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

react router 和 routes 不工作，我无法导航到博客页面

react router and routes is not working , i could not able to navigate to blogs page

javascript

reactjs

react-router

react-router-dom