React Router问题

最近在搞react项目,路由的问题简直,要把人搞崩溃了哎呦喂:::::::::

1、Attempted import error: ‘Switch‘ is not exported from ‘react-router-dom‘.

2、Error: useHref() may be used only in the context of a component

3、Matched leaf route at location “/“ does not have an element.This means it will render an＜Outle

答:::::::::::::::::::::::::::::::

1、react里面的路由跳转方式已经更改,弃用Swich

2和3,困扰了一天的时间哎,哎,哎,哎,,,,,,,,,,,,,,,,,,一直在说路由嵌套有问题,,,,,然后路由跳转缺少elemeng

原本的写法已经删除了,现在直接贴上能正常运行的写法吧: router.js:

import React from "react";

import Index from "../view/index";
import About from "../view/about";
import API from "../view/api";
import NewMember from "../view/newMember";
import Login from "../view/login";
import Register from "../view/register"


const routes = [{
    path:"/",
    title:"首页",
    exact:true,
    conponent:Index
},{
    path:"/about",
    title:"关于",
    exact:true,
    conponent:About
},{
    path:"/api",
    title:"API",
    exact:true,
    conponent:API
},{
    path:"/new",
    title:"新手入门",
    exact:true,
    conponent:NewMember
},{
    path:"/login",
    title:"登陆",
    exact:true,
    component:Login
},{
    path:"/register",
    title:"注册",
    exact:true,
    component:Register
}]

export { routes }

app.js:::::

import './App.css';
import { Layout, Menu} from "antd";

import Index from "./view/index";
import About from "./view/about";
import API from "./view/api";
import NewMember from "./view/newMember";
import Login from "./view/login";
import Register from "./view/register"
import { BrowserRouter as Router, Route,Routes} from 'react-router-dom';
import { Link } from "react-router-dom";
import IndexPage from './view/index'
import {routes} from './router/router_list';

function App() {
  return (
    <Layout>
        <Router initialEntries={["/"]}>
         <div>
           {
             routes.map((item,key) =>{
               return <Link to={item.path} key={key}>{item.title}</Link>
             })
           }
         </div>

          <Routes>
            <Route  exact path="/" element={<Index/>}>首页</Route>
            <Route  exact path="/about" element={<About/>}>关于</Route>
            <Route  exact path="/api" element={<API/>}>API</Route>
            <Route  exact path="/new" element={<NewMember/>}>新手入门</Route>
            <Route  exact path="/login" element={<Login/>}>登陆</Route>
            <Route  exact path="/register" element={<Register/>}>注册</Route>
          </Routes>
        </Router>
        <div>
          <IndexPage></IndexPage>
        </div>
    </Layout>
    
  );
}

export default App;

为什么要把routes.map放在app.js里面写,是因为我放在别的文件里面然后在引入的话就回 有个提示,就是上面的错误提示 2,,,,就很崩溃了,目前还没检查出什么原因来,,,

<Route exact path="/" element={}>首页这个里面的 element以前是component,,, 关于这个问题也是找了很久,,,,,

在这个网站找到解决方案的:reactrouterdotcom.fly.dev/docs/en/v6/…

刚开始搞react,,,,,,虚心求教各位大神呀,,,,,