react-router v6的一些疑问

Question

前几天看着视频学习了react-router，视频看完后准备自己动手练一练

然后就发现了一些疑问？

第一个坑， 视频里面用的是v5版本的router， 导致我完全按照视频内容的方式编写代码的时候会出现问题。

比如说：在v6版本中 废弃了 Redirect 和 Switch 以及component，

好在网上的v6资料一大堆， 也便于查询以及更改。

简单梳理了一下整个流程以及语法

//app.js

import React, { Component } from 'react'

import Router from './router'

import Header from './compoments/Header'

//  创建并且暴露
export default class App extends Component {
  
  render() {
    return (
      <div>
        <Header />
        <Router>
        </Router>
      </div>
    )
  }
}

// router.js
import React from "react";
import { BrowserRouter as Router, useRoutes } from "react-router-dom";

import News from "./compoments/News";
import Order from "./pages/Order";

import About from "./compoments/About";
import List from "./compoments/List";

const App = () => {
    let routes = useRoutes([
        {
            path: '/', element: < News/>,
        },
        {
            path: '/order', element: <Order />,
            children: [
                {
                    path: '/order/about', element: <About />,
                }, 
                {
                    path: '/order/List', element: <List />,
                }
            ]
        },
    ])
    return routes
}

const AppWrapper = () => {
    return (
        <Router>
            <App/>
        </Router>
    )
}

export default AppWrapper

// News.jsx

import React, { Component } from 'react'
import { Link, } from 'react-router-dom'
export default class News extends Component {
  render() {
    return (
      <div>
        <Link to="order">跳转到order页面</Link>
      </div>
    )
  }
}

至此写的时候发现了一个很繁琐的地方，
就是router.js里面的element调用组件的时候，
每注册一个路由，我就得在上面引用一个对应的该组件 ，

如何能像vue中那样实现直接在element后直接追加组件呢? 而不是每次都在上面引入？

或者大佬有什么好的呈现方式，亦或者项目中比较常见的规范也可以啊。

Answer 1

不想在上面引入的话，就用require啊

let routes = useRoutes([{
  path: '/', element: React.createElement(require("./compoments/News").default),
}]);