React- router 简单用法

React -router 简单用法

1. 安装依赖

npm install react-router-dom

2. 加载依赖

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

注意： Instead of we use

3. 简单使用

import React, { Component } from 'react';
import './App.css'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
    function Index() {
      return 
Home
;
    }

    function About() {
      return 
About
;
    }

    function Users() {
      return 
Users
;
    }

class App extends Component {


  render() {
    return (
      
       

        

          

            first
          
          

            second
          

            last
          
        
       
       
        
        
      
    );
  }
}

export default App;

4. 嵌套路由

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    
      

        


        
        
        
      
    
  );
}

function Home() {
  return 
Home
;
}

function About() {
  return 
About
;
}

function Topic({ match }) {
  return 
Requested Param: {match.params.id}
;
}

function Topics({ match }) {
  return (
    

      
Topics

      

        

          Components
        
        

          Props v. State
        
      

      
       
Please select a topic.
}
      />
    
  );
}

function Header() {
  return (
    

      

        Home
      
      

        About
      
      

        Topics
      
    
  );
}

export default App;

5. router 的 三种方法

• component

  component的值是一个组件，当URL和Route匹配时，component属 性定义的组件就会被渲染。例如：
  
  当URL="http://example.com/foo"时，Foo组件会被渲染

• renden

  render的值是一个函数，这个函数返回一个React元素。这种方式可 以方便地为待渲染的组件传递额外的属性。例如：

 (       
     
)}>

Foo 组件接收了一个额外的data属性。

• children

  children的值也是一个函数，函数返回要渲染的React元素。与前两 种方式不同之处是，无论是否匹配成功，children返回的组件都会被渲 染。但是，当匹配不成功时，match属性为null。例如：

 (       
         
       
     

如果Route匹配当前URL，待渲染元素的根节点div的class将被设置 成active。

6. match

当URL和Route匹配时，Route会创建一个match对象作为props中的 一个属性传递给被渲染的组件。这个对象包含以下4个属性。
（1）params：Route的path可以包含参数，例如包含一个参数id。params就是用于从匹配的URL中解析出 path中的参数，例如，当URL="http://example.com/foo/1"时，params = {id: 1}。
（2）isExact：是一个布尔值，当URL完全匹配时，值为true；当 URL部分匹配时，值为false。例如，当path="/foo"、 URL="http://example.com/foo"时，是完全匹配；当 URL="http://example.com/ foo/1"时，是部分匹配。
（3）path：Route的path属性，构建嵌套路由时会使用到。
（4）url：URL的匹配部分。

7.switch 和 exact

当URL和多个Route匹配时，这些Route都会执行渲染操作。如果只 想让第一个匹配的Route渲染，那么可以把这些Route包到一个Switch组 件中。如果想让URL和Route完全匹配时，Route才渲染，那么可以使用 Route的exact属性。Switch和exact常常联合使用，用于应用首页的导 航。例如：

如果不使用Switch，当URL的pathname为"/posts"时，和都会被匹配，但显然我们并不希
望被匹配，实际上也没有用户名为posts的用户。 如果不使用exact，"/" "/posts" "/user1"等几乎所有URL都会匹配第一个 Route，又因为Switch的存在，后面的两个Route永远也不会被匹配。使 用exact，保证只有当URL的pathname为"/"时，第一个Route才会被匹 配。

了解更多