React-Router笔记（第二天）

一. Showing Error Pages with errorElement

通过errorElement这个props，我们可以简单的实现当找不到页面时应该呈现的错误页面，而不是直接报错

{path: '/products', element: <ProductPage/> , errorElement: <ErrorPage/>}

二. Working with Navigation Links

相比link，NavLink多加入了className的props，并且这个props接收一个对象，对象里要写一个箭头函数，通过这个props，我们可以简单的实现当一个link是active状态时，一直改变它的样式。这里的end符号是指只有用/结尾的时候才有用（或许）。

<NavLink
    to="/"
    className={({isActive})=>
        isActive ? classes.active : undefined
    }
    style={(isActive) => ({textAlign: isActive ?'center':'left'})}
    end
>
    Home
</NavLink>

三. 自动跳转功能的实现

1. 引入包

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

2. 调用useNavigate方法,创建navigate

const navigate = useNavigate();

3. 使用navigate

navigate('/products')

四. 定义并且使用动态导航

{path: '/products/:productId',element: <ProductDetailPage />}

我们可以使用useParams这个方法去接收冒号后面的productId,具体使用方法如下

 import {useParams} from 'react-router-dom'
 const params = useParams();
 <p>{params.productId}</p>

五. 为动态导航添加链接

<>
      <ul>
        {eventData.map((event) => (
          <li key={event.id}>
            <Link to={`/events/${event.id}`}>{event.eventName}</Link>
          </li>
        ))}
      </ul>
</>

六. 绝对路径和相对路径

如果一个路径由slash开头那么我们说这个路径就是一个绝对路径，当我们把slash去掉就可以把绝对路径变成相对路径。 相对路径就是直接在当前路径后面加上一些东西，绝对路径则是把整个路径都写好了 link有一个 relative的props 可以设置两个值，决定了返回多少个segment。 下面这个代码就是只返回一个segment，如果不加relative则会直接返回到根。

<p><Link to=".." relative="path">Back</Link></p>

index route

{index：true，element：<HomePage/>}