React学习（路由）

学习目标：

提示：这里可以添加学习目标

例如：

一周掌握 Java 入门知识

---

1、路由 （1） 什么是路由

路由Router，前端项目描述了根据用户的不同请求返回不同的页面视图的 *** 作过程！

注意：代码中 *** 作的路由，本质上就是路由规则对象

（2） 基础配置语法

React中的路由，通过组件的形式完成了路由的定义，如图所示：

创建项目：脚手架构建路由项目

注意：默认构建的项目，基于react@18、react-dom@18版本，这个最新版本对应生态库兼容性并不好

$ npx create-react-app app01

项目降级：降低react、react-dom依赖版本

$ npm i react@17 react-dom@17 --save

修改入口模块index.js，将代码修改为@17版本启动代码

import React from 'react';
// import ReactDOM from 'react-dom/client';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// react@18启动代码
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
//   
//     
//   
// );

// react@17启动代码
ReactDOM.render(
  
    
  ,
  document.querySelector("#root")
)

构建路由组件：

views/Login.jsx：登录组件views/Reg.jsx：注册组件views/Layout.jsx：主页布局组件

构建路由规则对象：编辑App.jsx入口组件，添加一级路由

# 安装路由模块
# 最新版本6版本，和市场主流的5版本在使用上有一些语法差异
npm install react-router-dom@5 -S

import './App.css';
// 引入页面组件
import Layout from "./views/pages/Layout";
import Login from "./views/pages/Login"
import Reg from "./views/pages/Reg"
import {BrowserRouter as Router, NavLink, Redirect, Route, Switch} from "react-router-dom"
import NotFound from "./views/pages/NotFound";

function App() {
  return (
    <div className="App">
      {/*使用页面组件*/}
      {/*<Brand/>*/}
      {/*<Parent/>*/}

        <Router>
            {/*页面导航*/}
            <nav>
              <span><NavLink to="/" exact>LOGONavLink>span>
              <span><NavLink to="/layout">首页NavLink>span>
              <span><NavLink to="/login">登录NavLink>span>
              <span><NavLink to="/reg">注册NavLink>span>
            nav>
            <Switch>
                {/*  路由规则*/}
                <Route path="/" exact>
                    {/*重定向方法1*/}
                    <Redirect to="/reg"/>
                Route>
                {/*重定向方法2*/}
                {/*<Redirect path="/" to="login"/>*/}
                <Route path="/layout" component={Layout}/>
                <Route path="/login" component={Login}/>
                <Route path="/reg" component={Reg}/>
                <Route path="*" component={NotFound}/>
            Switch>

        Router>
    div>
  );
}

export default App;

App.css 代码

nav a {
  margin: 0 10px;
  color:gray;
  text-decoration: none;
}

nav a:hover {
  color: blue;
}
// 显示高亮
nav a.active {
  color: red;
  font-weight: bolder;
  font-size:18px
}

（3） 路由重定向

React-router-dom提供了路由重定向机制，让用户访问的某个空白链接可以定向到某个具体的页面组件

解决方案：重定向组件Redirect

{/* 路由规则 */}
{/* <Route path="/">
       <Redirect to="/login"/>
    Route> */}
<Redirect path="/" to="/reg"/>

<Route path="/layout" component={Layout}/>
<Route path="/login" component={Login}/>
<Route path="/reg" component={Reg}/>  

（4）导航高亮

导航菜单通过高亮样式，和当前展示页面进行对应，可以给导航链接添加激活样式

解决方案：添加导航链接active样式

编辑App.css添加导航链接的高亮样式

nav a.active{
  color: blue;
  font-weight: bolder;
  font-size: 18px;
}

（5） 严格匹配

导航链接中一旦出现路径上下级包含关系，导致导航高亮出现多个导航链接同时高亮的问题

解决方案：严格匹配，针对可能出现问题的导航链接，添加exact严格匹配关键词

{/* 页面导航 */}
<nav>
    <span><NavLink to="/" exact>LOGONavLink>span>
    <span><NavLink to="/layout">首页NavLink>span>
    <span><NavLink to="/login">登录NavLink>span>
    <span><NavLink to="/reg">注册NavLink>span>
nav>

（6） 404路由

用户通过链接直接访问某些资源，如果资源在服务器上不存在，可能会返回空白页面；从业务上来说这不是问题，但是对于用户体验比较差；所以需要配置友好的提示

解决方案：404路由、Switch选择匹配模式
新建404路由，NotFound.jsx

import React, {Component} from 'react';

class NotFound extends Component {
    render() {
        return (
            <div>
               <h2>你访问的页面暂时无法找到！h2>
            div>
        );
    }
}

export default NotFound;

{/* Switch选择匹配路由 */}
<Switch>
    <Route path="/" exact>
        <Redirect to="/login"/>
    Route>
    {/* <Redirect path="/" to="/reg" exact/> */}
    <Route path="/layout" component={Layout}/>
    <Route path="/login" component={Login}/>
    <Route path="/reg" component={Reg}/>    
    {/* 404 路由规则 */}
    <Route path="*" component={NotFound}/>  
Switch>