router6 无需第三方插件也可写路由表

router6如何编写路由表

我们先回顾之前的写法

App.js

import { Route, Routes, NavLink, Navigate, useRoutes } from 'react-router-dom';
import {Home} from './view/home' 
import {About} from './view/about'
function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <NavLink className="list-group-item" to="/home">home</NavLink>
        </li>
        <li>
          <NavLink to="/about">about</NavLink>
        </li>
      </ul>
      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/about' element={<About />} />
        <Route path='*' element={<Navigate to="/home"/>}/>
        <Route path='*' element={<Home />} />
      </Routes>
    </div>
  )
}

路由表写法

App.js

import { Route, Routes, NavLink, Navigate, useRoutes } from 'react-router-dom';
import {Home} from './view/home' 
import {About} from './view/about'
import './App.css'
function App() {
  const element = useRoutes([
    {
      path: '/home',
      element: <Home/>
    },
    {
      path: '/about',
      element: <About/>
    },
    {
      path: '/',
      element: <Navigate to="/home"/>
    },
    {
      path: '*',
      element: <Home/>
    },
  ])

  return (
    <div className="App">
      <ul>
        <li>
          <NavLink className="list-group-item" to="/home">home</NavLink>
        </li>
        <li>
          <NavLink to="/about">about</NavLink>
        </li>
      </ul>
      {element}
    </div>
  )
}

注意 如果想把路由表提取在外面，通过导入的方式优化代码，使用vite创建的react项目，需要以jsx结尾，如果是以js结尾则会报

Uncaught SyntaxError: Unexpected token '<'

代码提取

src/routes/index.jsx

import { Navigate } from 'react-router-dom';
import {Home} from '../view/home' 
import {About} from '../view/about'

const routes = [
  {
    path: '/home',
    element: <Home/>
  },
  {
    path: '/about',
    element: <About/>
  },
  {
    path: '/',
    element: <Navigate to="/home"/>
  },
  {
    path: '*',
    element: <Home/>
  },
]

export default routes

在app.jsx中引入

App.jsx

import { NavLink, useRoutes } from 'react-router-dom';
import routes from './routes'
import './App.css'
function App() {
  const element = useRoutes(routes)
  return (
    <div className="App">
      <ul>
        <li>
          <NavLink className="list-group-item" to="/home">home</NavLink>
        </li>
        <li>
          <NavLink to="/about">about</NavLink>
        </li>
      </ul>
      {element}
    </div>
  )
}
export default App