学习react第四天

ReactRouter

to web端选择使用react-router-dom

npm i react-router-dom

createBrowserRouter创建路由

RouterProvider挂载

import Login from "../page/login";
import Actile from "../page/article";
import App from "../App";
import { createBrowserRouter } from "react-router-dom";const router = createBrowserRouter([{ path: "/login", element: <Login /> },{path: "/acticle", element: <Actile /> },{path: "/", element: <App /> }
]);export default router;

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import store from './store/index.js'
import { Provider } from 'react-redux'
import router from './router/index.jsx'
import { RouterProvider } from 'react-router-dom'createRoot(document.getElementById('root')).render(<StrictMode>{/* 注入redux */}<Provider store={store}>{/* <App /> */}<RouterProvider router={router} /></Provider></StrictMode>,
)

路由跳转传参

searchParams传参

<button onClick={() => navigate('/login?id=100&name=song')}>去login</button>

import { useSearchParams } from "react-router-dom" const Login = () => {const [searchParams] = useSearchParams()console.log(searchParams.get('id'))console.log(searchParams.get('name'))return <div>Login Page</div>
}export default Login

Params传参

 {path: "/acticle/:id", element: <Actile /> },

<button onClick={() => navigate('/acticle/523512153')}>去acticle</button>

import { useParams } from "react-router-dom"const Actile = () => {const params = useParams()console.log(params.id)return <div>Article Page</div>
}export default Actile

二级路由

相关参数：Outlet 二级路由入口

import Login from "../page/login";
import Actile from "../page/article";
import Layout from "../page/layout";
import Cart from "../page/cart";
import App from "../App";
import { createBrowserRouter } from "react-router-dom";const router = createBrowserRouter([{ path: "/login", element: <Login /> },{path: "/acticle/:id", element: <Actile />,children: [// 默认二级路由{ index: true, element: <Layout /> },{ path: "cart", element: <Cart /> }]},{ path: "/", element: <App /> },
]);export default router;

// 切回默认路由 
<button onClick={() => navigator('')}>Layout</button>

404

{ path: "*", element: <NotFound /> }

路由模式