React 路由 | 青训营笔记首先是对路由的理解： 1.什么是路由一个路由就是一个映射关系(key:value)

首先是对路由的理解：

1.什么是路由

一个路由就是一个映射关系(key:value)

key为路径, value可能是function或component

2.路由分类后端路由：

1)理解： value是function, 用来处理客户端提交的请求。
2)注册路由： router.get(path, function(req, res))
3)工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

2.前端路由：

1)浏览器端路由，value是component，用于展示页面内容。
2)注册路由: <Route path="/test" component={Test}>
3)工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

对react-router-dom的理解：

1.react的一个插件库。

2.专门用来实现一个SPA应用。

3.基于react的项目基本都会用到此库。

路由的基本使用：

1.明确好界面中的导航区、展示区

2.导航区的a标签改为Link标签
	<Link to="/xxxx">Demo</Link>
    
3.展示区写Route标签进行路径的匹配
	<Route path='/xxxx’ component={Demo}/>
    
4. <App>的最外侧包襄了一个<BrowserRouter>或<HashRouter>

案例: 首先创建两个组件,然后在App.js文件中应用并使用, 接着在到index.js文件中注册App组件,最后用index.html文件渲染到页面上

App,js文件

import React, { Component } from 'react';
import { Link,Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
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">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </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>
        )
    }
}

组件一: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>
        )
    }
}

index.js文件

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(
    <BrowserRouter> // <App>的最外侧包襄了一个<BrowserRouter>或<HashRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
)

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

效果展示：

路由的使用是项目中很重要的一个环节，它控制着页面的跳转，一定要整理好思路去编写！！！之前有用过vue中的路由，其实道理和React路由差不多，差别就是一些细节上的实现。