AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

react-31-路由配置-重定向-404-嵌套路由

2022-05-11 290
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 路由 是中大型项目不可或缺的先做一些准备工作2个界面组件 ,便于路由跳转熟悉一下路由基础

1.前言

路由 是中大型项目不可或缺的

先做一些准备工作2个界面组件 ,便于路由跳转

熟悉一下路由基础


2. 城市组件

/src/pages/cities/index.js

写标签的 需要先写出 左半边   < 然后敲完标签 会自动生成 另外一半


import React, { Component } from 'react'
export default class index extends Component {
    render() {
        return (
            <div>
                <h1>城市列表</h1>
            </div>
        )
    }
}



3. 搜索界面

/src/pages/citySearch/index.js


import React, { Component } from 'react'
export default class index extends Component {
    render() {
        return (
            <div>
                <h1> 城市搜索</h1>
            </div>
        )
    }
}



4. 路由依赖安装


npm i react-router-dom -S



5. 路由引用

App.js 全局使用


import RouterComponent from "./pages/router"
function App() {
  return (
    <div className="App">
    <RouterComponent></RouterComponent>
</div>
  );
}
export default App;



6. 路由配置

参考vue的配置

pages/router/index.js

}LTO%L_MBOJ}U}NSMDT25~I.png

1.png

Router作为 BrowserRouter  的别名 从 react-router-dom 引入 BrowserRouter 是对路由配置的 容器 不能省


7. 匹配  ---path

7.1 path属性设置

Route 我习惯写成 单标签闭合标签     < 然后敲完标签后,再敲个 / 就不会 生成 另外的结束标签了


<Router>
                <Route path="/" component={CityComponent}  />
                <Route  path="/search" component={CitySearchComponet} />
            </Router>

问题效果

C{(UMO6H0487FZG82`%%Z3U.png

1.gif

/ 根路径默认匹配所有,所以/search会匹配2个,显示2个

/search/a和 /search/assss/sfaf 都能匹配上, 因为默认是模糊匹配


7.2 精确匹配  exact

exact 设置


return (
        <div>
            <Router>
                <Route  exact path="/" component={CityComponent} />
                <Route exact path="/search" component={CitySearchComponet}  />
            </Router>
        </div>
    )

精确匹配 只有 / 才能匹配

只有一级/search才能匹配 后面再加 2级,3级都匹配不上了


8.404组件

pages/404/index.js

Link 来源于路由依赖 类似 Vue 的 router-link,写法以一样,只是标签名不一样而已,to的值是想要跳转的,路由的,对应的path值


import React, { Component } from 'react';
import {
    Link  } from "react-router-dom"
export default class Component404 extends Component {
    render() {
        return (
            <div>
                <h1> 404  <Link to="/">   首页 </link>  </h1>
            </div>
        )
    }
}



9. 404路由配置

因为404 是都匹配不到 才走404 的,所以放到路由配置的末尾

不需要写 path属性


return (
        <div>
            <Router>
                <Route  exact path="/" component={CityComponent} />
                <Route exact path="/search" component={CitySearchComponet} />
                <Route component={Component404 }/>
            </Router>
        </div>
    )


问题

EZ4J9G6AILDDWI_(W(92EPV.png



10. switch 解决问题

因为 404组件没写path 所以都能匹配上,

但我们是想要所有的路由 只匹配一个就行了, 所以需要引入一个

Switch 组件

10.1 引入


import {
    BrowserRouter as Router,
    Route,
    Switch,
    Redirect,
    withRouter,
    Link,
    NavLink
} from "react-router-dom";


10.2 使用Switch

Switch 注意大写 包裹着 所有的路由


return (
        <div>
            <Router>
                <Switch>
                    <Route  exact path="/" component={CityComponent} />
                    <Route exact path="/search" component={CitySearchComponet} />
                    <Route component={Component404 }/>
                </Switch>
            </Router>
        </div>
    )

效果就不在贴图了,要不然图片太多了


11. 重定向 Redirect

Redirect来源于  路由依赖具名导入


<Redirect from="/home" to ="/" />

from 从哪个路由 跳转 ,也就是哪个路由需要重定向

上面的 地址栏 输入 /home 会重定向到 /


12.withRouter

非页面组件想拥有router功能

withRouter 来源于 路由依赖的具名导入

12.1 核心代码


class Swiper extends Component {
    render() {
        console.log("轮播图", this.props)
        return (
            <div>
                <button onClick={() => { this.props.history.goBack() }}>返回</button>
                <h1>轮播图</h1>
            </div>
        )
    }
}
// 将路由注入 Swiper
Swiper = withRouter(Swiper)


12.2编程式导航

类似vue里面的导航

NFH9]V8(I%`8O5V@I[GV@02.png

1.png

history里面 JS的相关API都有,所以可以自由操作


13. 非页面组件路由配置

像路由一样使用就行


<Route component={Swiper }/>



14.嵌套路由

嵌套路由  顶层路由不要加 exact


{/* 嵌套路由  顶层路由不要加 exact!!!!*/}
<Router>
                <Switch>
<Route  exact path="/" component={CityComponent} />
                    <Route exact path="/search" component={CitySearchComponet} />
                    <Route  path="/home" render={() => {
                        return (
                            <HomeComponent>
                                <Route exact path="/home/wx" component={WxComponent} />
                                <Route exact path="/home/my" component={MyComponent} />
                                <Route exact path="/home/fd" component={FdComponent} />
                                <Route exact path="/home/ad" component={AdComponent} />
                            </HomeComponent>
                        )
                    }}>
                    </Route>
                    <Route component={Component404 }/>
    </Switch>
</Router>



15. 嵌套路由出口

子路由是在HomeComponent里面所以出口也在HomeComponent 里面

出口直接是{this.props.children} 占位 和 vue 类似


class HomeComponent extends Component {
    render() {
        return (
            <div>
                {/* vue里面这样写 <router-view /> */}
                {/* 占位标志 */}
                {this.props.children}
                <div className={styles.tabBar}>
                  <ul>
                    <li>
                      <NavLink to="/home/wx" activeClassName={styles.selected}>
                        <i className="myFont">&#xe70b;</i>
                        <p>微信</p>
                      </NavLink>
                    </li>
                    <li>
                      < NavLink to = "/home/my"
                      activeClassName = {
                        styles.selected
                      } >
                        <i className="myFont">&#xe607;</i>
                        <p>我的</p>
                      </NavLink>
                    </li>
                    <li>
                      <NavLink to="/home/fd" activeClassName={styles.selected}>
                        <i className="myFont">&#xe629;</i>
                        <p>朋友圈</p>
                      </NavLink>
                    </li>
                    <li>
                      <NavLink to="/home/ad" activeClassName={styles.selected}>
                        <i className="myFont">&#xe652;</i>
                        <p>通讯录</p>
                      </NavLink>
                    </li>
                  </ul>
               </div> 
            </div>
        );
    }
}



16. iconfont

这里引用了 阿里妈妈的图标库,我是使用在线的

G2USR35E$YJ~TLN4V70_XJD.png

完全可以自己在 assets/ 下面放 图标相关的文件




文章标签：
JavaScript
容器
API
关键词：
React Native路由
React Native配置
react.js配置
react.js路由
react.js嵌套
云高风轻
目录
相关文章
六卿
|
5月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法，使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式，可以显著减少初始包的大小，从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果，并提供了使用前后的加载时间对比，说明了懒加载对性能的提升作用。
六卿
410 2
React项目路由懒加载lazy、Suspense，使第一次打开项目页面变快
夏天49597
|
3月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫（Guarded Routes），使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态，实现 `PrivateRoute` 组件进行路由保护，并在 `App.js` 中使用。文章还讨论了常见问题和易错点，提供了处理异步操作的示例，帮助开发者提升应用的安全性和用户体验。
夏天49597
103 1
你都不懂
|
3月前
|
前端开发 安全 网络安全
React——路由Route
React——路由Route
你都不懂
55 2
React——路由Route
夏天49597
|
4月前
|
资源调度 前端开发 测试技术
React Router 路由管理
【10月更文挑战第10天】本文介绍了 React Router，一个在 React 应用中管理路由的强大工具。内容涵盖基本概念、安装与使用方法、常见问题及解决方案，如路由嵌套、动态路由和路由守卫等，并提供代码示例。通过学习本文，开发者可以更高效地使用 React Router，提升应用的导航体验和安全性。
夏天49597
504 19
听白
|
4月前
|
前端开发 网络架构
React 路由
10月更文挑战第11天
听白
61 2
九月天空
|
4月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
九月天空
84 1
尹正杰
|
5月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
尹正杰
94 4
React技术栈-React路由插件之自定义组件标签
六卿
|
5月前
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式：通过在package.json中添加代理配置，以及通过创建setupProxy.js文件来实现更复杂的代理规则。
六卿
255 2
你都不懂
|
5月前
|
移动开发 前端开发 应用服务中间件
React两种路由模式的实现原理
React两种路由模式的实现原理
你都不懂
173 3
尹正杰
|
5月前
|
前端开发 程序员 API
React技术栈-React路由插件之react-router的基本使用
这篇博客介绍了React路由插件react-router的基本使用，包括其概念、API、以及如何通过实战案例在React应用中实现SPA（单页Web应用）的路由管理。
尹正杰
123 9