react-router的基本使用

react-router的基本使用

1. 第一步当然是安装.

• 使用npm安装

npm Install react-router-dom

• 使用yarn安装

yarn add react-router-dom

2. 第二步就是导入.

// 有两种url格式: BroswerRouter, 原型为h5的history模式, 路径中不带有`#`
// HashRouter ,使用hash模式, 路径中带有 `#`, 两者比较常用BroswerRouter. 
import {
    BroswerRouter as Router, Route, Link, NavLink } from 'react-router-dom'

• tips: 使用BroswerRouter的路径看起来更加简洁, 更像是一个URL. 和vue中router中, 设置mode: ‘history’一样(尤大推荐!!)

3. 第三步为使用.

• Router、Router、Link的使用:

import React, {
    Component } 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 React.Component {
   
  render() {
   
    return (
      <BrowserRouter>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
        <Link to="/profile"