关于React
路由,我们在学习之前先了解一下其他知识点:SPA
应用、路由的理解、react
中如何使用路由。
SPA应用的理解
我们知道React
脚手架给我们构建的是一个单页应用程序(SPA
),在页面加载时,只会加载一个HTML
文件,然后使用JavaScript
动态地更新页面内容。这意味着您需要使用JavaScript
来处理路由,以便在用户导航时更新页面内容,而不是通过传统的HTTP
请求/响应循环加载新页面。
-
SPA
全称:single page web application
- 整个应用只有一个完整的页面
- 点击页面中的路由链接不会刷新页面,只会做页面的局部更新
- 数据都需要通过
ajax
请求获取, 并在前端异步展现
SPA的优点包括:
- 更快的页面加载速度,因为只需要加载一次HTML
文件,之后只需要更新页面内容。
- 更好的用户体验,因为页面不会因为每次导航而重新加载。
- 更容易实现动态内容,因为可以使用JavaScript
来更新页面内容。
SPA的缺点包括:
- 对SEO
不友好,因为搜索引擎通常只会抓取初始HTML
文件,而不会执行JavaScript
来抓取动态内容。
- 对于较大的应用程序,可能会导致性能问题,因为需要加载大量的JavaScript
代码。
- 对于不支持JavaScript
的用户,可能无法访问应用程序。
路由的理解
1、什么是路由?
简单的说一个路由就是一对映射关系 (key: value), key为路径,value为function或者component
2、路由分类
- 后端路由:
- 理解:
value
是function
, 用来处理客户端提交的请求。 - 注册路由:
router.get(path, function(req, res))
- 工作过程:当
node
接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
- 前端路由:
- 浏览器端路由,
value
是component
,用于展示页面内容。 - 注册路由:
<Route path="/test" component={Test}>
- 工作过程:当浏览器的
path
变为/test
时, 当前路由组件就会变为Test
组件
React中如何使用路由
为了在React
应用程序中实现路由,您可以使用React Router
库。
React Router
库通过使用浏览器的历史记录API
来操作URL
并根据当前URL
呈现适当的组件来工作。当用户单击与定义的路由匹配的链接时,URL
会更改并呈现相应的组件。React Router
库提供了多种路由类型,包括BrowserRouter
、HashRouter
、MemoryRouter
等。其中BrowserRouter
使用HTML5
的history API
来实现路由,HashRouter
使用URL
的hash
部分来实现路由,MemoryRouter
则将路由信息存储在内存中。在使用
React Router
时,您需要将路由器包装在应用程序的根组件中,并使用Route
组件来定义每个路由。Route
组件可以使用path
属性来定义路由的路径,component
属性来指定路由匹配时要呈现的组件。Switch
组件用于包装Route
组件,以确保只有一个路由匹配时才会呈现相应的组件。如果您需要在路由之间传递参数,可以使用URL
参数或查询参数。URL
参数是在路径中定义的参数,例如/users/:id
,其中:id是一个参数。查询参数是在URL
中以?开头的键值对,例如/users?id=123
。您可以使用React Router
提供的useParams
和useLocation
钩子来访问这些参数。
编写案例
步骤一:安装React官方维护的路由依赖库
npm i react-router-dom --save
步骤二:编写组件Home
import React, { Component } from 'react'
export default class Home extends Component {
render() {
return <h2>我是Home的内容</h2>
}
}
步骤三:编写组件About
import React, { Component } from 'react'
export default class About extends Component {
render() {
return <h2>我是About的内容</h2>
}
}
步骤四:编写组件App
import React, { Component } from 'react'
import Home from './components/Home'
import About from './components/About'
import {Link,Route} from 'react-router-dom'
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* <a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a> */}
<Link className='list-group-item' to='/home'>Home</Link>
<Link className='list-group-item' to='/about'>About</Link>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
<Route path="/home"component={Home} />
<Route path="/about"component={About} />
</div>
</div>
</div>
</div>
</div>
)
}
}
其中关键代码有三个部分:
关键代码1:
import {Link,Route} from 'react-router-dom'
关键代码2:
<Link className='list-group-item' to='/home'>Home</Link>
<Link className='list-group-item' to='/about'>About</Link>
在React中靠路由链接通过组件Link
实现切换组件–编写路由链接
关键代码3:
<Route path="/home"component={Home} />
<Route path="/about"component={About} />
通过组件Route
实现路由注册
步骤五:编写入口文件index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App/>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
)
这里的App
组件被BrowserRouter
包裹, 使得整个应用共用一个路由器。
查看效果:文章来源:https://www.toymoban.com/news/detail-436740.html
文章来源地址https://www.toymoban.com/news/detail-436740.html
总结
- 明确好界面中的导航区、展示区
- 导航区的
a
标签改为Link
标签:<link to="/xxxx">Demo</Link>
- 展示区写
Route
标签进行路径的匹配:<Route path='/xxxx' component={Demo}/>
-
<App/>
的最外侧包裹一个<BrowserRouter>
或者<HashRouter>
到了这里,关于第三十章 React的路由基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!