react-router-dom v6 使用路由

Question

未捕获的错误：对象作为 React 子对象无效（发现：对象与键 {$$typeof, _payload, _init}）。如果您打算渲染一组子项，请改用数组。

index.tsx：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

import 'assets/styles/base.css'

ReactDOM.render(<App />, document.getElementById('root'))

App.tsx：

import React, { memo, Suspense } from 'react'
import { HashRouter, useRoutes, Navigate } from 'react-router-dom'
import { renderRoutes } from 'react-router-config'
const Discover = React.lazy(() => import('views/discover'))
const NotFound = React.lazy(() => import('views/not-found'))

const Router = memo(() => {
  const element = useRoutes([
    {
      path: '/',
      element: Navigate({
        to: '/discover',
        replace: true
      })
    },
    {
      path: '/discover',
      element: Discover
    },
    {
      path: '*',
      element: NotFound
    }
  ])
  return element
})

const App = memo(() => {
  return (
    <HashRouter>
      <header>header</header>
      <Suspense fallback={<div>loading</div>}>
        <Router></Router>
      </Suspense>
      <footer>footer</footer>
    </HashRouter>
  )
})

export default App

github:https://github.com/ashuicoder/react-music-ts

Answer 1

根据文档：https://reactrouter.com/docs/en/v6/hooks/use-routes

您应该将组件实例放在“元素”属性中：

const element = useRoutes([
  {
    path: '/',
    element: <Navigate to='/discover' replace={true} />
  },
  {
    path: '/discover',
    element: <Discover />
  },
  {
    path: '*',
    element: <NotFound />
  }
])