1.React-router
HashRouter | HistoryRouter
两种不同的路由
import { HistoryRouter } from 'react-router-dom' ;
export default const = ( ) => {
return ( < >
< HistoryRouter>
< App/ >
< / HistoryRouter>
< / > )
}
Routes | Route
路由映射关系;Link | NavLink
路由跳转
export default const App = ( ) => {
return ( < >
< div className= "header" >
< Link to= "/home" > home< / Link>
< Link to= "/about" > about< / Link>
< / div>
< div className= "content" >
< Routes>
< Route path= "/home" element= { < Home/ > } / >
< Route path= "/about" element= { < About/ > } / >
< Route path= "*" element= { < NotFound/ > } / >
< / Routes>
< / div>
< div className= "footer" >
< / > )
}
2. 路由嵌套
Route内部继续写Route; Outlet
在显示的位置站位
< Route path= "/home" element= { < Home/ > } >
< Route path= "/home/recommend" element= { < HomeRecommend/ > } / >
< / Route>
手动跳转路由useNavigate | withRouter(Comp)
const navigate = useNavigate ( ) ;
const goToPath = ( path ) => {
navigate ( path) ;
}
withRoute ( comp) ;
3. 路由参数
< Route path= "/datasource/:did" element= { < SourceDetail / > } / >
navigate ( ` /datasource/ ${ id} ` ) ;
const { did} = useParams ( ) ;
const { did} = this . props. params;
< Link to= { ` /datasource?did={id} ` } > 详情< / Link>
const location = useLocation ( ) ;
const search = location. search;
const [ searchParams, setSearchParams] = useSearchParams ( ) ;
searchParams. get ( "did" )
4.路由懒加载
React.lazy(void => component)
懒加载路由配置 const Home = React.lazy(() => import(“…/Components/Home”));Suspence
包裹App
< Suspence fallback= { < Loading / > } >
< App/ >
< / Suspence >