2024年最全React入门实战（二）页面跳转（附完整代码）(1)，2024腾讯前端面试题精选

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

效果：可以看到，切换页面时左上角那个刷新图标没有转动，即没有重新加载

---

axios请求数据与钩子函数componentDidMount()使用

---

• 在Home页面装载完毕时，通过axios向JsonPlaceHolder发起数据请求；

• 数据请求的过程在钩子函数componentDidMount()中进行；

• 当axios请求得到回应，记为res，其中的data字段就是我们需要的数据，由于数据较多，只存储前20条记录；

• 将得到的数据记录到state中（方便在render函数中取用）；

• 如果得到posts数据，就用JSX语法处理后渲染展示；否则提示正在加载中。

import React, { Component } from ‘react’

import axios from ‘axios’

class Home extends Component {

state = {

posts: null

}

componentDidMount() {

// 向第三方库请求数据并保存到state中

axios.get(“http://jsonplaceholder.typicode.com/posts”).then(res => {

this.setState({

posts: res.data.splice(0, 20)

})

})

}

render() {

// 处理获得的数据

const { posts } = this.state;

// 如果得到posts数据，就用JSX语法处理后渲染展示；否则提示正在加载中

const postsList = posts ? (

posts.map(post => {

return (

{post.title}

{post.body}

)

})

) : (

加载信息中，请稍候......

)

return (

< div className=‘container’ >

这是Home页面

{postsList}

)

}

}

export default Home;

效果：展示出posts信息

---

单条post详情页：路由参数

---

• 设置详情页的路由表

• 点击某条post，就跳转到这条记录的详情页——Link标签与路由参数的使用

• 详情页组件接收到路由参数，向第三方库请求数据，得到数据后展示

• 为防止一个路由参数匹配到多条路径，使用Switch标签——只匹配单条路由

App.js 设置详情页路由，设置Switch匹配单条路径

{/详情页路由/}

新建SinglePost.js，作为详情页组件

import React, { Component } from ‘react’

import axios from ‘axios’

class SinglePost extends Component {

state = {

post: []

}

componentDidMount() {

// 请求单页数据并存储到state

const post_id = this.props.match.params.post_id

axios.get(“http://jsonplaceholder.typicode.com/posts/” + post_id).then(res => {

this.setState({

post: res.data

})

})

}

render() {

// 从state中取出数据并加工

const { post } = this.state;

const postShow = post ? (

{post.title}

{post.body}

) : (

还在加载中......

)

return (

{postShow}

)

}

}

export default SinglePost;

在Home.js中，将post的title部分包裹上Link标签，让用户可以点击跳转

{post.title}

最后再加上图片背景，在index.css中加样式

最终效果如下：

---

完整代码

---

App.js:

import React, { Component } from ‘react’

import Navbar from ‘./Navbar’;

import { Route, BrowserRouter, Switch } from ‘react-router-dom’

import Home from ‘./Home’;

import About from ‘./About’;

import Contact from ‘./Contact’;

import SinglePost from ‘./SinglePost’;

class App extends Component {

render() {

return (

);

}

}

export default App;

Home.js

import React, { Component } from ‘react’

import axios from ‘axios’

import { Link } from ‘react-router-dom’

import MyImg from ‘./1.jpg’

class Home extends Component {

state = {

posts: null

}

componentDidMount() {

// 向第三方库请求数据并保存到state中

axios.get(“http://jsonplaceholder.typicode.com/posts”).then(res => {

this.setState({

posts: res.data.splice(0, 20)

})

})

}

render() {

// 解构

const { posts } = this.state;

const postsList = posts ? (

posts.map(post => {

return (

{post.title}

{post.body}

)

})

) : (

加载信息中，请稍候......

)

return (

< div className=‘container home’ >

这是Home页面

{postsList}

)

}

}

export default Home;

Navbar.js:

import React from ‘react’

import {Link} from ‘react-router-dom’

const Navbar = () => {

return (

<a href='/'className=‘brand-logo’>React入门实战（二）

• Home页面
• About页面
• Contact页面

• )

  }

  export default Navbar;

  About.js:

  import React from ‘react’

  const About = ()=>{

  return (

  这是About页面

  )

  }

  export default About;

  最后

  javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

  nst About = ()=>{

  return (

  这是About页面

  )

  }

  export default About;

  最后

  javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-KBu0AX6e-1715651566824)]

  [外链图片转存中…(img-zEIrbvCe-1715651566825)]