多页面需要路由来管理
路由:类似网址
在开始之前 | React Router6 中文文档 (baimingxuan.github.io)
路由设计
页面对应的路由
-
首页
/ -
登录
/login -
注册
/regitser -
问卷管理
-
我的问卷
/manage/list -
星标问卷
/manage/star -
回收站
/manage/trash
-
-
问卷详情
-
编辑问卷
/question/edit/:id(动态路由) -
问卷统计
/question/stat/:id
-
-
404
实操
建页面组件
</ outlet> 类似vue< /slot>用于切换不同的路由
配置路由
- 新建 router文件夹下 index.tsx组件(注意是tsx)
- 配置路由出口
const router = createBrowserRouter([
{
path:'/',
element: <MainLayout />,
children:[
{
path:'/',
element: <Home/>
},
{
path:'login',
element: <Login />
},
{
path:'register',
element: <Register />
},
{
path:'manage',
element: <ManageLayout />,
children:[
{
path:'list',
element: <List />
},
{
path:'star',
element: <Star />
},
{
path:'trash',
element: <Trash />
},
]
}
]
},
{
path:'/question',
element: <QuestionLayout />,
children:[
{
path:'edi/:id', //动态参数
element: <Edit />
},
{
path:'stat/:id',
element: <Stat />
},
]
},
{
path:"*", //404 路由配置,写在最后兜底
element: <NotFound />
}
])
import { RouterProvider } from "react-router-dom"
import routerConfig from "./router"
function App() {
return <RouterProvider router={routerConfig}></RouterProvider>
}
export default App
传递动态参数的写法
实现跳转
路由跳转
import React,{FC} from 'react'
import { useNavigate , Link } from 'react-router-dom';
const Home : FC = ()=>{
const nav=useNavigate();
const toLogin = () => {
//1.一般跳转
// nav('/login')
//2.携带参数跳转 http://localhost:5173/login?a=100
nav({
pathname:'/login',
search:'a=100',
})
}
return (
<>
<h1>home</h1>
<div>
{/* 1. 通过第三方hook跳转 */}
<button onClick={toLogin}>登录</button>
<br />
{/* 2. 通过Link组件跳转 */}
{/* 2.1 一般跳转 */}
{/* <Link to="/register">注册</Link> */}
{/* 2.2 携带参数跳转 */}
<Link to="/register?a=100">注册</Link>
</div>
</>
)
}
export default Home;
获取动态参数
http://localhost:5173/question/edit/20
import React,{FC} from 'react'
import {useParams} from 'react-router-dom';
const Edit : FC = ()=>{
//获取携带的参数
const {id = ''} = useParams();
return (
<>
<h1>edit {id}</h1>
</>
)
}
export default Edit;
获取url参数
http://localhost:5173/manage/list?keyword=13
// 获取url参数
const [searchParams] = useSearchParams()
console.log('keyword',searchParams.get("keyword"));
