react router(路由)一些改变

引入react-router-dom

react路由需要依赖 react-router-dom 文件,在终端对应的项目文件里引入这个文件

  pnpm i react-router-dom

这样我们就可以使用 react 的路由了。

开始设置路由

/main.tsx
import { createBrowserRouter, RouterProvider} from 'react-router-dom'

//创建一个路由实例，用来定义路由path和组件的对应关系
const router = createBrowserRouter([
  {
  //路由'/'一般默认是首页
    path: '/',
    element: <home />,
   }
]}
//然后在文件里面找到 mian.tsx,把<App />组件替换掉
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    //这里{}里的 router 就是上面定义的 router
    <RouterProvider router={router}/>
  </React.StrictMode>,
)

我们也可以将 router 拿出去专门做一个配置文件，因为页面很多的话，配置会很长,比如下面的代码

//router.tsx
import {createBrowserRouter} from 'react-router-dom'
//记得要引入这个创建方法

const router = createBrowserRouter([
  {
    path: '/',
    element: <home />,
   }, {
    path: '/login',
    element: <Login />,
   }, {
    path: '/about',
    element: <About />,
   }
]}
export default router

然后在 main.tsx中引入这个 router 属性，这样就可以改变网址渲染出不同的组件了

设置点击按钮跳转路由(编程式导航)

我们肯定不想每次跳转到下一个页面的时候是依靠手动修改网址的方式实现，所以就要把改变路由的任务交给按钮来实现

//Login.tsx
import {useNavigate} from 'react-router-dom'

export default function Login() {
  const navigate = useNavigate()
  const goAbout = () => {
    //第一个参数是跳转的地址
    //第二个参数是是否替换掉上路由
    navigate('/about', { replace: true })
  }
  return (
    <div>
      <p>this is login</p>
      <button onClick={goAbout}>go about</button>
    </div>
  )
}

当点击这个按钮就会根据navigate 设置的路由渲染出对应的组件，第二个参数是询问是否用/about 这个路由替换掉现在这个路由，如果替换掉 login 页面的路由，我们返回的时候就会返回 login 页面的上一个页面

路由参数的传递

假如页面 a 里面有个 id 要传递给页面 b

//方式一：searchParams（history的传递方式）
//需要在上面 login 页面的 navigate 方法
 navigate('/about?id=10086')
 //用 ？号拼接 id，拼接后跳转到新页面网址后面也会显示这串字符

//About.tsx
import {useSearchParams} from 'react-router-dom'

export default function About() {
//用解构赋值获取调用后的数据，然后使用 params 上的 get 方法获取传递过来的id值
const [params] = useSearchParams()
const id = params.get('id')
  return (
    <div>
      <p>this is about {id}</p>
    </div>
  )
}

方式二：Params
//Login.tsx
navigate('/about/10086')
//这种需要在路由配置的时候设置一个占位
//router.tsx
{
path: '/about/id',
element: <About />
}

//About.tsx
import {useParams} from 'react-router-dom'

export default function About() {
const params = useParams()
  return (
    <div>
      <p>this is about {params.id}</p>
    </div>
  )
}

嵌套路由

当我们在首页导航栏点击某个按钮，只是想在首页展示该内容，而不是页面跳转，这就可以用到嵌套路由了

//router.tsx
在配置文件里设置一个 children 路由,这样首页就相当于一级路由，article 就是二级路由
//创建方式上面提到过，但是为了结构清晰，所以没写
{
  path:'/',
  element: <Home />
  children: [
    {
      path: '/article',
      element: <Article />
    }
  ]
}

配置好后，在 home 文件里设置路由的跳转入口和出口

/Home.tsx
import {Outlet, Link} from 'react-router-dom'

export default function Home() {
  return(
    <div>
      <div>
        <p>这是首页</p>
      </div>
      <div>
        <p><Link to={'/article'} >文章</Link></p>
      </div>
      <div>
        <p>这是二级路由的出口位置</p>
        <Outlet />
      </div>
      
    </div>
  )
}

Link 标签是入口按钮，点击就会在处将Article 组件渲染出来，如果想要在一个页面切换多个内容，就把该配置都写在想要渲染的页面的配置的 children 里面。

//router.tsx
{
  path:'/',
  element: <Home />
  children: [
    {
      path: '/article1',
      element: <Article1 />
    }, {
      path: '/article2',
      element: <Article2 />
    }, {
      path: '/article3',
      element: <Article3 />
      children: [
        {
          path: 'about',//这里为啥不用/about 呢？
          element: <About />
        }
      ]
    }
  ]
}

上面的 about 因为它的上级路由是/article3,下级路由会在点击跳转的时候拼接这两个路由，如果加了/号，就是说是首页的二级路由，但是首页里没有它，就会报错，而我们只是想要它是/article3 的下级路由，所以就只写 about 就可以了。点击about后网址会显示xxx/article3/about

设置一个默认二级路由

在我们进入首页时，肯定不想什么内容都不展示只是几个孤零零的按钮，所以我们要设置一个默认展示的内容

//router.tsx
{
  path:'/',
  element: <Home />
  children: [
    {
      index: true,
      element: <Article1 />
    }, {
      path: '/article2',
      element: <Article2 />
    }
  ]
}

设置index 为 true，当我们进入它的上级路由时就会默认显示这个二级路由的内容，它的路由就变成了首页路由，当我们跳转到首页的时候默认会显示这个路由渲染的内容。

设置错误时的页面

虽然我们输入错误的网址会默认返回一个错误页面，但我们希望这个页面可以由自己设置

//router.tsx
{
  path:'/',
  element: <Home />
  children: [
    {
      index: true,
      element: <Article1 />
    }, {
      path: '/article2',
      element: <Article2 />
    }
  ]
}, {
  path: '*',
  element: <Error />
}

//Error
export default function Error() {
  return(
    <div>您访问的页面不存在</div>
  )
}

这样我们就可以自己定义页面报错时的显示内容了