前几天看着视频学习了react-router，视频看完后准备自己动手练一练然后就发现了一些疑问？第一个坑， 视频里面用的是v5版本的router， 导致我完全按照视频内容的方式编写代码的时候会出现问题。比如说：在v6版本中 废弃了 Redirect 和 Switch 以及component，好在网上的v6资料一大堆， 也便于查询以及更改。简单梳理了一下整个流程以及语法//app.jsimport 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.jsimport 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.jsximport 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后直接追加组件呢? 而不是每次都在上面引入？或者大佬有什么好的呈现方式，亦或者项目中比较常见的规范也可以啊。