install

1. npm install --save react-router

--save

1. used to add dependencies to package.json
2. auto install when others clone your project

import module

1. use es6 moudule grammer import {Router, Route, Link} from 'react-router-dom@6'

create react app use vite

1. use vite to create a react project npm create vite@latest
2. cd project root
3. npm install
4. npm run dev

router authentication practice

the benefits of router component encapsulation

1. easy to manage, many components use the same router component

project content structure

router

1. -router.tsx //register router component
2. -routerMap.tsx // router map
3. -privateRouter.ts // authentic router component
4. -router.ts //

write root router component

import React from 'react'
import ReactDom from 'react-dom'
import App from './App.tsx'
import {BrowserRouter} from 'react-router-dom'

ReactDom.createRoot(document.getElementById('#root')).render(
<React.strictMode>
<BrowserRouter>
<App/>
</BrowserRouter>
</React.strictMode>
)

React.createRoot(dom)

1. the new API of react18
2. create root render

! in ts

1. document.getElementById('#root') !
2. ! means not null or undefined

the principal of privateRouter component

1. get token
2. if token expired or null, redirect to login page
3. else render children componet
4. basic code

import { useEffect } from "react"


const privateRouter = (children) => {


    function isExpiredToken(){

    }

    try {
        const token = getToekn()
        useEffect(() => {
            if (!token || isExpiredToken()) {
                navigator('/login')
            }
        }, [])
    } catch {

    }
    return <>{children}</>
}
export default privateRouter

the structure of routerMap js file

1. export an array object named routerMap
2. routerMap is object array
3. each object contains path:'/path', element: <name>
4. or children object array, each object contais path element too
5. path:'*' means all path

export const routerMap = [
         {
             path: "/login",
             element: <Login />,
         },
         {
             path: "/",
             element: (
                 <PrivateRoute>
                     <Layout />
                 </PrivateRoute>
             ),
             children: [
                 {
                     path: "/user",
                     element: <User />,
                 },
             ],
         },
         {
             path: "*",
             element: <Navigate to="/login" />,
         }, //其他没有被注册过的路径统一重定位到login
     ];

register routerMap to router component

1. map url to component

import {useRouters} from 'react-router-dom'
import {router} from './routerMap'
const Router = ()=>{

    const routerMap = useRouters(router)

    return  <div>{routerMap}</div>
    

}
export default Router

basic knowledge

createBroswerRouter

1. create the relationship between path and element
2. element can be
3. grammar

const router = createBroswerRouter([path:'/',element:<h1>123</h1>])

apply router to app

<RouterProvider router = {router}/>

broswerRouter or hashRouter

1. hashRouter adapt to low version broswer
2. broswer router is more powerful

deploy @ path name

1. open vite.config.js

import {join} from 'node:path'
//join 路径拼接
resolve: {
alias: {
'@':join(__dirname, './src')
}
}

2. open tsconfig.json

complierOptions: {
baseUrl: '.',
"path":{
'@/*':{
"./src/*"
}
}
}

3. open main.tsx

import Root from '@/index.js'

4. the benefit of @ no matter which file , @ alwasy replace the same path

error path page

createBroswerRouter([path:'./',element:<root/>, errorElement:<errorElement>])

useRouterError

1. const error = useRouterError() as errorResopnse
2. error.message or error.statusText

children route path

1. add children route to father route
2. children path can start with /

const route = createBroswerRouter([{
path:'/',element:<root/>,children:[{path:'children/:id', element:<children/>]
}])

2. add <outlet>to father component

import {Outlet} from 'react-router-dom'
<Outlet/>

use link to replace a

1. <a> will reflash when switch route
2. <link> will not reflash
3. <link to = 'path'/>

loader

1. add loader function to component

export default const loader = ()=>{
return null
}

2. import loader from component

import {loader} from './root'

3. add loader attribute to object

loader: loader

4. after match router, before show component, will run loader function

useLoaderData

import {useLoaderData} from 'react-router-dom'
const data = useRouterData()
...
loader(){
return {name:'keke',age:'12'}
}