React 路由

  React 路由

    React 推出两个版本 一个是 react-router 一个是 react-router-dom

    这里使用的是 react-router-dom  因为该方法多了一个  Link 组件

   1. 在创建好 React 环境的基础上 下载 react-router-dom

      npm install react-router-dom

   2. 引入  react-router-dom

  注意 :  在引入时如果第一个参数只有 HashRouter 时  那么在模板中标签名为<HashRouter>

import {HashRouter as Router,Link,Route} from ‘react-router-dom‘;

  在下面的模板中

   <Router></Router> 为组件导出的容器, 在该标签中只能有一个子节点, <Route>是我们配置项

class App extends Component {    //创建组建类
  render() {
    return (
      <div className="App">
          <Router>
              <div>
                  <Route path="/home" component={Home}></Route>
                  <Route path="/list" component={List}></Route>
              </div>
          </Router>
      </div>
    );
  }
}

    3 . 路由传参

       在 Route 配置项中的 path 中加形参 , 实参则在网址中加入即可

<Route path="/list/:id" component={List}></Route>

      如果想要获取实参,需要在 该组件中加 componentDidMount .

class List extends Component {
    render() {
        return (
            <div className="list">
                <p>这是我的列表页</p>
            </div>
        );
    }
    componentDidMount(){
        console.log(this.props.match.params);
    }
}

原文地址:https://www.cnblogs.com/461770539-qq/p/9393548.html

时间: 2024-11-06 09:42:30

React 路由的相关文章

react路由配置(未完)

React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-router-dom 1.引入 上边两种方法都行,需要注意的是第二种,下边的便签的写成<HashRouter></HashRouter> 2.如何使用 3.路由传参 原文地址:https://www.cnblogs.com/5b4cn/p/9393527.html

我的一个react路由之旅(步骤及详图)

今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的,原理性的东西,网上很多,我现在搬砖学习很开心,勿忘初心~ (1)首先,你确定你安装了react环境,这第一步难度系数1,菜鸟级别的不演示了 (2)接下来,你要是用react路由,需要安装路由插件 1 npm install react-router-dom --save-dev //这里可以使用c

我的一个React路由嵌套(多级路由),路由传参之旅

在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的react已经配置了redux(见我的redux之旅),所以这是在引入的插件里做的演示. 从App组件跳转到NewRoute组件(需要简单的路由跳转,点击自己预习) (1)新建一个demo: 这里使用了render方式在一个文件中模拟了多个组件的效果 代码只为讲解使用在真实开发中尽量不要这样写代码的. 这

简单的说一下react路由(逆战班)

现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前端 路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)前端路由是一套映射规则,在React中,是URL路径与组件的对应关系使用React路由简单来说,就是配置路径和组件路由的基本使用步骤: 1 import React from 'react'; 2 import ReactDOM fro

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-center的真实URL路由.在实际项目中常常用真实的URL的方式,但是该形式存在一个隐藏的问题,就是项目打包后,浏览器页面刷新会出现40

React 路由基本配置

app.js /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm install react-router-dom --save 3.找到项目的根组件引入react-router-dom import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 4.复制官网文档根组件里面

2017.12.07 React路由到不同组件界面

前提: 引入的react-router组件必须是2.*.*的版本,不然其他版本不是这样的写法   1.index首页路由到不同组件界面: import React,{Component} from 'react'; import ReactDOM from 'react-dom'; import { Router,hashHistory,Route } from 'react-router'; import Apply from './apply'; import Examines from '

react路由传值

在上一篇总结了react中路由的基本用法,实现了基本的页面跳转,但这肯定是不够用的,比如说在新闻列表页面,点击某一条新闻,希望页面能跳转到新闻详情页,又该如何实现呢? 首先继续上一篇的项目,添加一个新闻详情页面组件content.js 然后在根组件App.js中配置路由: 最后,修改新闻列表组件News.js    当我们点击新闻列表页面的新闻时,页面就会跳转到详情页,但是在实际的运行中,当点击不同的新闻标题时,需要根据新闻id或者其他标识符在详情页请求加载不同的新闻详情,在新闻列表页面,我们可

React 路由懒加载的几种实现方案

这篇文字简单的介绍了React在路由懒加载方面的几种实现方案. 传统的两种方式 import() 符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象.这意味着模块时异步加载的 webpack v2+ 使用 使用方式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function component() {  return import( /* webpackChu