react路由搭建(以文件方式)

1、所需下载库

npm install react-router-dom react-dom

2、创建router文件

import React, { lazy } from 'react'
import { Navigate, RouteObject } from 'react-router-dom'
//路由懒加载
const Discover = lazy(() => import('@/views/discover'))
const Recommend = lazy(() => import('@/views/discover/c-views/recommend'))
const routes: RouteObject[] = [
  {
    path: '/',
    element: <Navigate to="/discover" />
  },
  {
    path: '/discover',
    element: <Discover />,
    //二级路由
    children: [
      {
        path: '/discover',
        element: <Navigate to="/discover/recommend" />
      },
      {
        path: '/discover/recommend',
        element: <Recommend />
      }
    ]
  }
]
export default routes

3、在入口文件index.tsx在配置

import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
import App from '@/App'
import 'normalize.css'
import './assets/css/index.less'
import { HashRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { store, persistor } from './store'
import { PersistGate } from 'redux-persist/integration/react'
import { ConfigProvider } from 'antd'

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      //哈希路由
      <HashRouter>
        <ConfigProvider theme={{ token: { colorPrimary: '#c20c0c' } }}>
          <App />
        </ConfigProvider>
      </HashRouter>
    </PersistGate>
  </Provider>
)

4、在App组件中引用

import React, { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
import routes from './router'
function App() {
  return (
    <div className="App">
        //当组件未加载完成时显示的组件
      <Suspense fallback={<div>loading...</div>}>
        <div className="main">
            //相当于vue的<router-view/>
            {useRoutes(routes)}
        </div>
      </Suspense>
    </div>
  )
}
export default App

5、二级路由的使用

import React, { ReactNode, Suspense, memo } from 'react'
import { Outlet } from 'react-router-dom'
interface IProps {
  children?: ReactNode
}
const Discover: React.FC<IProps> = () => {
  return (
    <DiscoverWapper>
      <Tabbar></Tabbar>
      <Suspense fallback={<div>loading...</div>}>
        //必须使用此占位符，相当于vue的<router-view/>
        <Outlet />
      </Suspense>
    </DiscoverWapper>
  )
}
export default memo(Discover)

6、路由跳转

import { NavLink, useNavigate } from 'react-router-dom'

<NavLink to="/discover">发现音乐</NavLink>

或者
const navigate = useNavigate()
const handleClickSearch = (e: any) => {
  navigate('/discover')
}

7、路由传参

import { useLocation } from 'react-router-dom'   
//传参
  const navigate = useNavigate()
  const handleClickToRanking = () => {
    navigate('/discover/ranking', { state: { id: itemDetail.id } })
  }
//获取参数
const { state } = useLocation()
state.id