React学习: 04 react-router-dom v6 react的路由简单实例

react-router-dom

简介

前端和路由打交道几乎是不可避免的,react下的路由包整合到了react-router-dom中,下载安装react-router-dom v6 就包含了路由操作的基本库类了.

安装

npm install react-router-dom@6

最简单的一个小例子

当使用命令npx create-react-app my-app创建了一个前端的项目之后,首先引入react-router-dom,使用<BrowserRouter>包裹dom树的最外层,代码如下:

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
    , document.getElementById('root'))

注册路由:

//index.js
{/* 注册路由 */}
<Routes>
         <Route path="/about" element={<About/>} />
         <Route path="/home" element={<Home/>} />
 </Routes>

连接组件:

<NavLink to="/about">
          About
        </NavLink>
        <NavLink to="/home">
          Home
</NavLink>

用来跳转到指定页面,效果如下:

路由表和子路由

目前来说,比较方便成熟的做法是定义一个路由表,首先创建路由表,定义页面的路由,

src/routes/index.js
import HookHome from '../components/Hook-test'
import Home from '../components/Home'

import RouteHome, { HomePage, AboutPage,NewsPage,DetailPage } from '../components/Route-test'

const routes = [
    {
        path: '/',
        element: <Home />
    },
    {
        path: 'hook',
        element: <HookHome />,
    },
    {
        path: 'home',
        element: <Home />
    },
    {
        path: 'route',
        element: <RouteHome />,
        children: [
            {
                path: 'aboutpage',
                element: <AboutPage />
            },
            {
                path: 'newspage',
                element: <NewsPage />,
                children: [
                    {
                        path:'detail',
                        element: <DetailPage />
                    },
                ]
            },
            {
                path: 'homepage',
                element: <HomePage />
            }
        ]
    }
]

export default routes

路由表的好处是直观自然,修改方便,尤其是定义子路由更是直观了很多.
在app.js中引入定义好的路由表:

import { useRoutes } from "react-router-dom";
import routes from './routes'
const element = useRoutes(routes)

使用{element}展示组件页面,如果有自组件的话,使用展示子组件的页面.

路由传参

react router 路由传参有几种方法,我个人比较喜欢useLocation(),配合useNavigate()使用起来还是很方便的,
定义一个事件的方法:

const navigate = useNavigate()
function showDetail(item) {
    navigate('detail', {
        replace: false,
        state: {
            id: item.id,
            title: item.title,
            content: item.content
        }
    })
}

组件中渲染代码:

<div>
    <h1>Welcome to news</h1>
    <List sx={style} component="nav" aria-label="mailbox folders">
        {
            messages.map((item) => {
                return (
                    <div>
                        <ListItem key={item.id} onClick={() => showDetail(item)} button>
                            <NavLink to="detail"
                                state={{
                                    id: item.id,
                                    title: item.title,
                                    content: item.content
                                }} />
                            {item.title}查看详情
                        </ListItem>
                        <Divider />
                    </div>

                )
            })
        }
    </List>
    {/* 指定路由组件的展示位置 */}
    <Outlet />
</div>

接收组件的代码:

function DetailPage() {
    const { state } = useLocation()
    const id = state.id;
    const title = state.title;
    const content = state.content;
    return (
        <ul>
            <li>id:{id}</li>
            <li>title:{title}</li>
            <li>content:{content}</li>
        </ul>
    )
}

对于一些简单的数据传递这些足够了,当然需求复杂的可以看看一些其他的api,官方都有接收,csdn里也能搜到的.至此react的路由简单案例就到这里吧.