如何用react构建单页面

如何用react构建单页面

react构建单页面需要使用react-router-dom库,所以我们需要先安装

npm install react-router-dom -S

下面以一个例子讲解,react构建单页面应用的方法。

react创建单页面项目并且组件传值

1、首先在app.js中配置路由,这里是通过react-router-dom这个自带的组件完成的

定义一个class类在里面进行单页面的创建,并且此文件还可以创建其他的页面以及多个单页面项目

import React, { Component } from 'react';
import { BrowserRouter as  Router , Route,  Switch} from 'react-router-dom'
import home './components/home/home.js'
class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
            <Route strict path="/xxx/home" component={home} />
        </Switch>
      </Router>
    )
  }
}

2、然后在home.js文件中

主要是通过Router组件进项渲染,

在渲染的过程中, 如果要给子组件传值,必须要写成render方法渲染子组件才可以正确传值

<Route strict path="/pxr/home/search" render={() => {
    return <Search list={this.state.searchList}></Search>     
}} />

组件传值

如果要由子组件给父组件传值 , 同样也需要写成render方法渲染, 然后在子组件标签上添加一个方法,在子组件中通过this.props.方法名()触发

// 父组件
<Route strict path="/pxr/home/home" render={() => {
    return <HomePage getChildMsg={this.handleMsg} />
}} />
// 子组件
this.props.getChildMsg(item)

下面是全部代码, 希望对大家有帮助

import React, { Component } from 'react'
import search from '../images/pxr3.png'
import { BrowserRouter as  Router , Route, Link} from 'react-router-dom'
import HomePage from './homePage'
import SmallLoan from './SmallLoan'
import Search from './Search'
import DistailPage from './DistailPage'
import { message } from 'antd';
class Mouth extends Component {
  constructor (props) {
    super (props)
    this.state = {
      disName: '',
      search: '',
      searchList: []
    } 
  }
  componentWillMount () {}
  componentWillReceiveProps (newProps) {}
  // 设置搜索值
  setSearch = (e) => {}
  // 搜索功能
  toSearch = async (e) => {}
  // 重置种类标签
  backHome = () => {}
  // 设置种类标签
  handleMsg = (msg) => {}
  render () {
    return (
      <div className='mouth'>
        <Router>
          <div>
            <div className="mouth_head">
              <div className="mouth_img">
                <Link to="/pxr/home/home" onClick={this.backHome}>
                <img src={require('../images/logo1.png')} alt=""/></Link>  
                <span >{this.state.disName}</span>
              </div>
              <div className="mouth_inp">
                <input style={img1} type="text" value={this.state.search}
                 onChange={this.setSearch} placeholder="请输入搜索信息" />
                <Link to="/pxr/home/search" onClick={(e)=>this.toSearch(e)} >
                <button>搜 索</button></Link>
              </div>
            </div>
            
            <Route strict path="/pxr/home/home" render={() => {
              return <HomePage getChildMsg={this.handleMsg} />
            }} />
            <Route strict path="/pxr/home/small" component={SmallLoan} />
            <Route strict path="/pxr/home/search" render={() => {
              return <Search list={this.state.searchList}></Search>     
            }} />
            <Route strict path="/pxr/home/distail" component={DistailPage} />
          </div>
        </Router>
      </div>
    )
  }
}
export default Mouth
Image placeholder
前端答疑
未设置
  21人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何用react写页面跳转

如何用react写页面跳转1、使用react-router-dom中的Link实现页面跳转一般适用于,点击按钮或其他组件进行页面跳转,具体使用方式如下:import{Link}from'react-r

如何用react做增删

如何用react做增删1、使用react做一个输入框,点击提交在下面列表展示,点击对应的列表项,删除该项,如下:2、项目的数据结构,首先分析需求,一个input框,一个button,一个列表。可以把i

如何用react做一个表格

如何用react做一个表格1、首先使用React.createClass方法创建一个组件;2、在render中通过React.DOM创建table、tr、tbody标签;3、在tr标签中使用map方法

如何用react写轮播?

前提:安装好Node.js安装。【推荐阅读:nodejs怎么下载安装?】步骤:1、安装swiper使用node包管理器npm来安装swipernpminstallswiper--save2、在轮播组件

如何引用react-dom

如何引用react-dom引用react-dom很简单,首先你需要创建一个react项目,这里我们介绍两种方式,第一种是使用npm来创建,另一种是采用script标签引入react的方式创建项目。●使

如何使用react做安卓app

如何使用react做安卓app一、首先,我们先创建一个react项目作为演示。1.全局安装create-react-app#全局安装 npminstall-gcreate-react-app2.构建一

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w

如何下载使用react.js

如何下载使用react.js一、下载react.js、react-dom.js和babel.js在浏览器中输入这三个地址,将得到的页面全选后复制粘贴到本地的文件中,分别对应react.js、react

如何使用react native

如何使用reactnative一、首先安装react-native-cli脚手架工具npminstall-greact-native-cli二、使用react-native-cli创建一个初始化的工程

怎么用react写界面

怎么用react写界面用react写页面,官方的做法是采用jsx语法,JSX是一种JavaScript的语法扩展,运用于React架构中,其格式比较像是模版语言,但事实上完全是在JavaScript内

怎么用react写登陆框

怎么用react写登陆框1、创建一个Login组件,添加userName和userPassword状态;2、为输入框绑定onChange事件到changeUsername和changePassword

用react怎么做移动端

用react怎么做移动端1、首先使用create-react-app脚手架创建react项目;2、然后打开index.html文件,在头部添加meta元数据,设置用户网页的可视区域宽度为设备的宽度,初

用react怎么插图片

用react怎么插图片1、img标签引入图片因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片需要用下面的方式引入2、背景图片引入1第一种就是常规的新建

通过 Laravel 创建一个 Vue 单页面应用(一)

使用laravel创建一个Vue单页面应用(SPA)可以构建一个整洁的由API驱动的应用。在此教程中,我们将学习如何构建并运行一个以Vue路由为前端,laravel为后端的SPA应用。首先我们将注意

通过 Laravel 创建一个 Vue 单页面应用(三)

我们将通过演示在vue-router进入一个路由之前,如何异步加载数据来继续使用Laravel构建我们的VueSPA。 之前在通过Laravel创建一个Vue单页应用(二)中完成了UsersInde

如何利用Reworld做一个一键吸空投箱的效果

功能效果展示运行环境Win7,Win8,Win10Reworld版本体验版vc_redist.x64运行环境针对零基础读者的补充下载安装Reworld对应版本Reworld官网链接:http://ww

如何用vscode启动react项目

如何用vscode启动react项目要求:●具有nodejs环境、已安装npm●已安装vscode首先使用create-react-app脚手架创建一个项目。create-react-appdemo1

如何用npm下载react

如何用npm下载react●首先我们需要安装nodejs环境【Node.js安装教程】我们可以在cmd中输入node-v和npm-v来检测是否安装成功。node-v npm-v当两条命令都成功的输出了

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

如何用别人的css样式

如何用别人的css样式使用别人的css样式首先需要引入,引入到自己的HTML文档中,主要有两种方式。1、下载别人的css样式,通过link标签引入。打开网站,按下f12打开开发者工具面板,选中Sour

如何用css做导航栏?

如何用css做导航栏?1、新建一个html文件,在head部分,编写css样式○list-style-type:none;是除掉导航前面默认带的点○lia,lia.active,lia:hover:n

Java的Lambda表达式有何用处?如何使用?

本文转载自知乎,之前刚接触到Lambda表达式,看了好多文章,看完也还是一脸懵逼,后来刷知乎刷到这篇文章,顿开茅塞,让我明白了Lambda表达式到底是个啥,咋用。最重要的是第一点,知道了这个,其他的要

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR中直播页面和视频列表页面的区别介绍

背景分析随着平安城市、智慧城市、雪亮工程、智能交通等各项建设的持续开展,安防逐渐得到普及,面对如此广阔的市场,对安防企业来说不仅仅是机遇更多的是挑战。现今大多数摄像头一直没能摆脱人工监控的传统监控方式

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我