react学习日记---(5) react-router-dom@6 react路由-路由重定向-路由嵌套

Tomcat20

已于 2022-10-11 17:00:14 修改

阅读量708

点赞数

分类专栏： react 文章标签： react.js 学习 javascript

于 2022-10-11 15:55:30 首次发布

本文链接：https://blog.csdn.net/Tomcat20/article/details/127264775

版权

安装路由插件—默认是6版本
npm i react-router-dom -s

这里查看

组件介绍
- 所有的需要使用路由组件都要包裹在BrowserRouter或者HashRouter标签里面
Browser和HashRouter的主要区别:
path表现形式不一样
BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
HashRouter的路径包含#,例如：localhost:3000/#/demo/test
刷新后对路由state参数的影响
BrowserRouter没有任何影响，因为state保存在history对象中。
HashRouter刷新后会导致路由state参数的丢失！！！
- Link跳转路由链接; NavLink跳转路由链接，会为选中路由添加一个active类名
- 路由标签Route，写在Routes标签内部，用于显示路由链接对应的组件
- 路由的重定向功能用Navigate实现
主要代码

index.js

用Router(BrowserRouter)标签包裹整个App组件

import React from "react";
import ReactDOM from 'react-dom/client'
import {
    BrowserRouter as Router} from 'react-router-dom'
import App from "./App";

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(
  <Router>
    <App></App>
  </Router>
)

App.js

import React from 'react'
import {
    Routes, NavLink, Route, Navigate } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

export default function App() {
   
  return (
    <div>
    <div className="row">
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"