router基本使用~~~

二. react-router基本使用

1. Router基本使用

1.1 安装react-router：

安装react-router-dom会自动帮助我们安装react-router的依赖；

yarn add react-router-dom

1.2 重要的组件

react-router最主要的API是给我们提供的一些组件

1.2.1 BrowserRouter或HashRouter

• Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
• BrowserRouter使用history模式；
• HashRouter使用hash模式；

1.2.2 Link和NavLink：

• 通常路径的跳转是使用Link组件，最终会被渲染成a元素；
• NavLink是在Link基础之上增加了一些样式属性（后续学习）；
• to属性：Link中最重要的属性，用于设置跳转到的路径；

1.2.3 Route：

• Route用于路径的匹配；
• path属性：用于设置匹配到的路径；
• omponent属性：设置匹配到路径后，渲染的组件；
• exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；

1.3 练习：

import React, {
    PureComponent } from 'react';

import {
    BrowserRouter, Route, Link } from 'react-router-dom';

import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';

export default class App extends PureComponent {
   
  render() {
   
    return (
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/profile">我的</Link>
        
        <Route exact path="/" component={
   Home} />
        <Route path="/about" component={
   About} />