react-router 4.x

Posted yuyujuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-router 4.x相关的知识,希望对你有一定的参考价值。

本次主要总结react中的路由的使用,实现让根组件根据用户访问的地址动态挂载不同的组件。

1,创建项目

首先使用命令 npx create-react-app react-router创建项目,然后npm install下载相关依赖,再按照之前的文件目录整理src文件夹,最后再components文件夹下面新建两个组件Home.js和News.js。

技术分享图片

技术分享图片 技术分享图片

2,安装和引入路由

安装和引入路由可以分为以下几步:

  1. 安装路由:在项目根目录执行命令: npm install react-router-dom --save进行安装
  2. 根组件进行引入import { BrowserRouter as Router, Route, Link } from "react-router-dom"
  3. 修改根组件文件App.js:在根元素中使用<Router>标签对路由组件进行包裹,然后使用组件。

技术分享图片

根据上面的路由配置,当启动项目的时候,显示的是Home组件里面的内容,当我们更改地址栏,在其后面加入/news的后缀以后,就会显示News组件的内容。

技术分享图片 技术分享图片

在Home组件路由配置中,多了一个单词exact,这个意思是严格匹配,如果去掉这个单词,那么当在地址改为http://localhost:3000/news的时候,就会通过加载两个组件,因为/news也能匹配‘/’这个路径。

 技术分享图片

3,使用路由

我们在引入路由的时候,一共引入了三个组件Router, Route, Link,接下来及来使用这最后一个组件。

在实际运用中,并不会通过手动修改地址栏来进行页面切换,一般都是通过点击事件触发的,在react中,可以借助Link实现a标签进行地址跳转的功能,如下所示,只需要稍微修改根组件App.js就可以了。

技术分享图片

技术分享图片

现在当我们点击不同的标签,就会加载不同的页面了。下面贴出app.js的代码:

import React, { Component } from ‘react‘;
import ‘./assets/css/App.css‘;
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home from ‘./components/Home‘;
import News from ‘./components/News‘;

class App extends Component {
  render() {
    return (
      <div className="App">
        <Router>
          <div> 
            <header className="title">  
              <Link to="/">首页</Link>
              <Link to="/news">新闻</Link>
            </header>
            <Route exact path="/" component={Home} />
            <Route path="/news" component={News} />                    
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

 

以上是关于react-router 4.x的主要内容,如果未能解决你的问题,请参考以下文章

react-router4.x

react-router 4.x

React-Router4.x中文文档

十react-router 4.x的基本配置

十 React路由(react-router4.x): 动态路由get传值React中使用url模块

使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置