react路由_ButOf的博客

react 路由

一、 react路由的基本使用

安装 react-router-dom ，在入口文件index.js中引入HasRouter组件，并将要使用的到路由的组件进行包裹
在子组件中引入Link，Route
Link用来配置路由的跳转路径
- to属性设置跳转的路由地址
Route用来设置展示的组件
- component用于设置匹配的路径展示的组件
- path设置匹配的路径
- exact 属性用于让Router中的path与Link中的to完全匹配
Switch标签的作用是将包裹在其中的Router中path重复的进行剔除，只留下唯一的Router
- 包裹的必须直接是route标签的元素
// app.js
import Nav from './components/Nav'
import Home from './components/Home'
import {Link, Route} from 'react-router-dom'
function App() {
  return (
        <p><Link to='/home'>home</Link></p>
        <p><Link to='/nav'>nav</Link></p>
        <p><Route exact component={Home} path='/home'></Route></p>
        <p><Route exact component={Nav} path='/nav'></Route></p>
        <Switch>
          <Route exact component={Home} path='/home'></Route>
          <Route exact component={Home} path='/'></Route>
          <Route exact component={Nav} path='/nav'></Route>
          <Route exact component={Nav} path='/nav'></Route>
          <Route exact component={Nav} path='/nav'></Route>
        </Switch>
export default App;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {HashRouter} from 'react-router-dom'
ReactDOM.render(
  <React.StrictMode>
    <HashRouter><App /></HashRouter>
  </React.StrictMode>,
  document.getElementById('root')
路由入门小案例 
当前存在Home、About两个组件，我们希望在页面上的导航栏中实现点击对应标签，即可在页面上显示对应组件的内容。 
Home组件： 
import React, { Component } from 'react'
export default class Home extends Component {
    render() {
        return (
            <h3>我是Home的内容</h3>
About组件： 
import React, { Component } from 'react'
export default class About extends Component {
    render() {
        return (
            <h3>我是About的内容</h3>
App组件 
省略import...
export default class App extends Component {
    render() {
        return (
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header"><h2>React Router Demo</h2></div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            <a class="list-group-item" to='/about'>About</a>
                            <a class="list-group-item" to='/home'>Home</a>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-body">
步骤一：下载路由组件库 
install i react-router-dom
步骤二：引用Link标签，替代<a>标签进行跳转： 
需要注意的是<Link>其实本质上也是<a>标签，只是说它阻止了a标签默认的跳转动作，但保留了其修改浏览器URL路径的能力。 
import {Link,Router, Route} from 'react-router-dom'
export default class App extends Component {
    render() {
        return (
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header"><h2>React Router Demo</h2></div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            <Link class="list-group-item" to='/about'>About</Link>
                            <Link class="list-group-item" to='/home'>Home</Link>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-body">
步骤三：定义路由对应要跳转的组件： 
这一步也比较好理解，前端路由器(会在步骤四配置)会自动检测到浏览器的url发生了变化，此时就会拿新的url地址到路由表中进行匹配，步骤三定义的就是和url匹配成功的路由，将显示对应哪个组件。 
import {Link,Router, Route} from 'react-router-dom';
export default class App extends Component {
    render() {
        return (
                <div class="row">
                    <div class="col-xs-offset-2 col-xs-8">
                        <div class="page-header"><h2>React Router Demo</h2></div>
                <div class="row">
                    <div class="col-xs-2 col-xs-offset-2">
                        <div class="list-group">
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            <Link class="list-group-item" to='/about'>About</Link>
                            <Link class="list-group-item" to='/home'>Home</Link>
                    <div class="col-xs-6">
                        <div class="panel">
                            <div class="panel-body">
                                在App.js中，定义路由，路由规定了path对应跳转的组件
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
步骤四：在最外层的index.js中配置前端路由器 
这里可以使用Router组件，但我们一般是使用功能更为强大的BrowerRouter或者HashRouter。 
import React from 'react'
import ReactDOM from 'react-dom'
// 注意，我们一般不直接引入Router，而是引入 BrowserRouter 或者 HashRouter
import {BrowserRouter} from 'react-router-dom'
import App from './App'
ReactDOM.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root'))
.路由组件与一般组件
 import React, { Component } from 'react';
 import { Link,Route } from 'react-router-dom'
 import Home from './pages/Home'
 import About from './pages/About'
 import Header from './components/Header'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap/dist/js/bootstrap'
 export default class App extends Component {
     render() {
         return (
             <div>
                 <div className="row">
                     <div className="col-xs-offset-2 col-xs-8">
                         <Header a={1}></Header> {/* 一般组件写法 */}
                     </div>
                 </div>
                 <div className="row">
                     <div className="col-xs-2 col-xs-offset-2">
                         <div className="list-group">
                             {/* 原生html 要靠<a>跳转不同的页面 */}
                             {/* <a className="list-group-item" href="./about.html">About</a>
                             <a className="list-group-item active" href="./home.html">Home</a> */} 
                            {/* 在React中靠路由链接实现切换组件 */}
                             <Link className="list-group-item" to="/home">Home</Link>
                             <Link className="list-group-item" to="/about">About</Link>
                         </div>
                     </div>
                     <div className="col-xs-6">
                         <div className="panel">
                             <div className="panel-body">
                                 {/* 注册路由 路由组件写法 */}
                                 <Route path="/home" component={Home}/>
                                 <Route path="/about" component={About}/>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         )
     }
 }

 Header 组件代码
 import React, { Component } from 'react' 
export default class Header extends Component {
     render() {
         console.log('一般组件',this.props)
         return (
             <div className="page-header"><h2>React Router Demo</h2></div>
         )
     }
 }

 路由组件与一般组件props接收的数据对比图: 

 路由组件与一般组件的不同之处
 1.写法不同:
     一般组件: <Demo/>
     路由组件: <Route path="/demo" component={Demo}/>
 2.存放位置不同:
     一般组件: components
     路由组件: pages
 3.接收到的props不同:
     一般组件: 写组件标签时传递了什么，就能收到什么
     路由组件: 接收带三个固定的属性
         history:
             go: ƒ go(n)
             goBack: ƒ goBack()
             goForward: ƒ goForward()
             push: ƒ push(path, state)
             replace: ƒ replace(path, state)
         location: 
             pathname: "/home"
             search: ""
             state: undefined
         match:
             params: {}
             path: "/home"
             url: "/home" 
包含了LInk跳转以及js触发跳转并传参。
这是项目的目录结构，主要的代码都在src目录下，src下面新建一个containers文件夹放我们的一些组件，router文件夹是配置路由用的。
按照顺序来写：detail文件夹下的代码
import React from 'react' 
class Detail extends React.Component {
  render() {
    return (
      <p>Detail，url参数：{this.props.params.id}</p>
                                    在多个组件中使用相同的 Hook 不会共享 state。自定义 Hook 是一种重用状态逻辑的机制，所以每次使用自定义 Hook 时，其中的所有 state和副作用都是完全隔离的。自定义 Hook 本质上只是一个对代码逻辑进行抽取的函数，严格意思上来说，它本身并不是 React 的特性。需求：在组件创建和销毁的时候都进行打印。就可以将这部分的逻辑抽取成一个自定义的 Hook。自定义 Hook 的名称应该始终以 use 开头，除此之外不需要具有任何其他特殊的标识。在其内部可以调用其他的 Hook。
 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。
yarn build
 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。
 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！
 有关更多信息，请参见有关的部分。
yarn eject
 注意：这是单向操作。 eject ，您将无法返回！
 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。
 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESL
                                    react并没有提供像Vue专门创建路由的页面，react路由需要先安装，然后导入才能使用，下面是react路由从安装到实现的详细步骤，一起来看看吧！
开始前的准备：本案例需要先改造一下react项目的index.js文件
，关闭严格模式，路由才可正常跳转，否则会出现导航栏显示已跳转但是页面未跳转的情况！！
                                    两种常用的路由模式：BrowserRouter和HashRouter声明当前要用是一个非hash的模式的路由包裹整个应用一个React应用只需要使用一次HashRouter，hash模式的路由一个有#（HashRouter），一个一带#（BrowserRouter）（推荐）Link指定导航链接，完成路由跳转to属性指定路由地址，最终被渲染为a标签Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部Route用于指定路由组件和路由地址path：路由组件对应的路径；
1.React Router4.0基本概述：
React Router4.0（以下简称 RR4）遵循React的设计理念，即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件（还有若干对象和方法），具有声明式（声明式编程简单来讲就是你只需要关心做什么，而无需关心如何去做，可组合性的特点。
RR4 采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有...
import ReactDOM from 'react-dom'
HashRouter 表示一个路由的跟容器，将来，所有的路由相关的东西，都要包裹在 HashRouter 里面，而且，一个网站中，只需要使用一次 HashRouter 就...
cnpm install -g create-react-app （仅第一次创建项目前需要）
cnpm install react-router-dom@5.2.0 --save（安装6.0以下版本，因为6.0以上版本某些属性已经被迭代）
3.新建两个页面