React路由的两种写法

第一种：

src/router下的index.tsx文件 

import App from '@/App'
import Home from '../views/Home'
import About from '../views/About'
import {BrowserRouter,Routes,Route,Navigate} from "react-router-dom"


//两种路由模式的组件,BrowserRouter (History模式) ,HashRouter(Hash模式) 

// const baseRouter = () => {
//     return ()
// }

//以上写法可以简写为:
const baseRouter = () => (
    <BrowserRouter>
    <Routes>
        <Route path='/' element={<App/>}>
            {/* 配置用户访问的时候重定向 */}
            <Route path='/' element={<Navigate to="/home" />}></Route>
            <Route path='/home' element={<Home/>}></Route>
            <Route path='/about' element={<About/>}></Route>
        </Route>
    </Routes>
    </BrowserRouter>
)

export default baseRouter;

src/main.tsx文件

//React 必要的两个核心包
import React from 'react'
import ReactDOM from 'react-dom/client'
//样式初始化-一般放在最前面
import "reset-css"
//UI框架的样式

//全局样式s
import "@/assets/styles/global.scss"

//组件的样式  


引入路由
import  Router  from "@/router/index.tsx"
//项目的根组件
//import App from './App.tsx'


//把App跟组件渲染到id 为root的dom节点上
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
<Router/>



  </React.StrictMode>,
)

 src/App.tsx

import { useState } from 'react'
import { Outlet,Link} from 'react-router-dom';

const App: React.FC = () => {
  const [count, setCount] = useState(0)


  return (
    <div className='App'>
        <Link to='/home'>Home</Link>
      <Link to='/about'>About</Link>
   <Outlet></Outlet>
    </div>

  )
}

export default App

注意第一种写法需要把App根组件去掉，不然在跟组件App.tsx文件中使用Link就会报错

 Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null. 

第二种写法 

src/router下的index.tsx文件 

import Home from '../views/Home'
import About from '../views/About'

//Navigation 重定向组件
import { Navigate } from 'react-router-dom'

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

export default routes 

src/main.tsx文件

在react 的Router V6 需要给路由的最外层提供一个上下文

不然容易出现这样的错误

 useRoutes() may be used only in the context of a <Router> component.

解决方法：

在main.tsx文件引入BrowserRouter

//项目入口  从这里开始


//React 必要的两个核心包
import React from 'react'
import ReactDOM from 'react-dom/client'
//样式初始化-一般放在最前面
import "reset-css"
//UI框架的样式

//全局样式s
import "@/assets/styles/global.scss"

//组件的样式  


//项目的根组件
import App from './App.tsx'

import {BrowserRouter} from 'react-router-dom'


//把App跟组件渲染到id 为root的dom节点上
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
 <BrowserRouter> 
 <App />
 </BrowserRouter> 
  </React.StrictMode>,
)

 src/App.tsx

import { useState } from 'react'
import {useRoutes,Link} from 'react-router-dom';
import router from "./router"

const App: React.FC = () => {
  const [count, setCount] = useState(0)
  const Outlet =  useRoutes(router)
  return (
    <div className='App'>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About</Link>
      {Outlet}
    </div>

  )
}

export default App