react-router的基本使用

最新推荐文章于 2024-09-12 10:04:18 发布

Mangooxx

最新推荐文章于 2024-09-12 10:04:18 发布

阅读量373

点赞数 1

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_40944062/article/details/107589825

版权

本文介绍了react-router的基本使用步骤，包括安装、导入和实际应用。重点讲解了Router、Route、Link、NavLink以及Switch的用法，帮助读者理解如何在React应用中实现页面间的导航和精确匹配。

摘要由CSDN通过智能技术生成

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"