携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

一、React路由

1.1 什么是路由

路由是根据不同的url地址展示不同的内容或页面。一个针对React而设计的路由解决方案，可以友好的解决组件和url的映射关系。

1.2 路由安装

npm install react-router-dom@5

1.3 路由使用

在src文件夹下创建FilmRouter文件夹，在里面创建views文件夹，将之前我的这篇博客中moviecomponents文件夹的3个组件复制进去：在这里插入图片描述在FilmRouter文件夹下创建Router文件夹，在Router文件夹下创建ReactRouter.js组件，写入如下代码：

import React, { Component } from 'react'
import {HashRouter, Route} from 'react-router-dom'
import Film from '../views/Film'
import Cinema from '../views/Cinema'
import Profile from '../views/Profile'

export default class ReactRouter extends Component {
  render() {
    return (
          <HashRouter>
            <Route path="/film" component={Film}></Route>
            <Route path="/cinema" component={Cinema}></Route>
            <Route path="/profile" component={Profile}></Route>
          </HashRouter>
    )
  }
}

在FilmRouter文件夹下创建index.js，写入如下代码：

import React, { Component } from 'react'
import FRouter from './Router/ReactRouter'

export default class Index extends Component {
  render() {
    return (
        <FRouter></FRouter>
    )
  }
}

在src文件下index.js引入修改：在这里插入图片描述

效果：在这里插入图片描述

1.4 路由重定向

在react路由体系中，万物皆组件，路由重定向写法如下：

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

在这里插入图片描述这写法为模糊匹配，可以看到，在访问/cinema时还是重定向到/film，所以我们要添加Switch来进行精确匹配：让Redirect精确匹配，添加exact如下：

1.5 匹配404

<Route component={NotFound}/>

在这里插入图片描述

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。

扫描二维码关注公众号，回复： 14420044 查看本文章

React初识路由