React：react-router-dom的学习总结_import react from 'react'; import { browserrouter -优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43334673/article/details/111414261

本文总结了React中的react-router-dom库的使用，包括路由基础、动态路由参数的获取（Params、search和state参数）以及路由的重要属性。讲解了如何通过Link和Route组件实现页面间的跳转，并在跳转中传递参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.前言

使用了React、Vue等开发的应用都是SPA(单页面应用)。

什么是单页面应用呢？

特点：

整个应用只有一个完整的页面。
店家页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取，并在前端异步展现。

单页面应用想要实现多页面应用类似切换内容效果，那就离不开路由。

React的路由是一个独立被分割出去的库，在使用路由前需使用下面命令在项目中引入该库：

cnpm install react-router-dom --save

2.路由基础

咋们由浅入深，先来学习最基础的路由使用。

静态路由示例：

index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'

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

App.js:

import React from 'react'
import {
    BrowserRouter as Router, Route, Link } from 'react-router-dom'
import './index.css'

function TakeOut(props) {
   
  return (
    <div>
      <h3>我是外卖页面</h3>
    </div>
  )
}

function Order(props) {
   
  return (
    <div>
      <h3>我是订单页面</h3>
    </div>
  )
}

function My(props) {
   
  return (
    <div>
      <h3>我是"我的"页面</h3>
    </div>
  )
}
export default class App extends React.Component {
   
  render() {
   
    return (
      <div>
        <h1>哈哈哈，傻瓜</h1>
        <Router>
          <div className="navigator">