浅谈react路由------起步篇

react路由管理——Router

关于react的路由，通过查看官网、研究其他大神的观点及在逆战班看到的介绍，达到了一个浅显的认识，以下是我对router的见解，有什么不当之处，欢迎各位大佬的建议与指正！
React Router按照官方介绍即：让UI组件和URL保持同步,让你通过简单的API便可实现强大的特性。

1.路由的两种方式

我们所说的路由可分为前端路由和后端路由
前端路由：根据不同的url去切换组件

• 触发机制：react-router中的Link标签
• 响应机制：渲染Route标签中对应组

件
后端路由：根据用户的请求返还不同的内容

• 触发机制：ajax
• 响应机制：app.get(’/router’,callback)

//在app.js中
app.get('/', (request, response) => {
  let res = {
  "success": true,
  "message": "",
  "data": [],
  }
  response.send(res)
})

前端路由和后端路由的区别

1. 前端路由是基于浏览器事件监听，而不是像后端路由一样是通过http协议
2. 前端路由是由局部渲染，是前端通过Link设置的路由或在浏览器输入相应路由引起组件渲染；而后端路由重新渲染了整个页面，所以由此来看前端路由体验相对较好一些了

2.命令行

要使用router就不得不提的命令行下载：
npm i react-router-dom --save
这是使用react的第一步操作！

3.关于Router的两种模式

1）历史记录模式：引入BrowserRouter
2）hash模式：引入HashRouter
历史纪录模式和hash模式的区别为：hash模式是在#后面判断

4.this.props.children

react的路由是可以渲染子组件的，样式如下：

<组件>
	<子组件  />
</组件>

经由路由包裹App，通过api（context）向App的子孙组件去传值

5.用法

1）在入口文件index.js引入

import {BrowserRouter as Router} from 'react-router-dom'

{BrowserRouter as Router}是为了方便代码，用Router代替BrowserRouter ，类似于我们对某件事物的简称，通俗来讲，当你喊一个名为威廉·马里克斯·阿布奇(名字纯属瞎编，如中靶，万望见谅)时，你一般会称呼简称：威廉、马里克斯或阿布奇，极少会称其全名，太费时费力
2）index.js

<Router>
	<App />    //根组件
</Router>

3）在App.js中引入

import {Route} from 'react-router-dom'

4）在App.js中

<Route path="xxx" component={组件} />

5）App.js

<NavLink to="path" >yyy</NavLink>
//<Link to="path" >yyy</Link>

• Link和NavLink的唯一区别：NavLink有样式，而Link没有
• 在NavLink中默认选中有一个类默认的名字，叫active
• NavLink有activeClassName，可以指定当前路由的类名

6.exact

exact的作用便是精确匹配，精确匹配到exact所在的代码所代表的内容

7.Redirect重定向

<Redirect from="/test" to="/test/a" exact />

解读：from=/test''当路径是test，to="/test/a"便重新定向直接定向为/test/a

8.关于Switch

Switch的作用便是包裹<Route />，当存在多个组件时，只渲染第一个，是必不可少的。

以上要点的代码举例

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router} from 'react-router-dom'
// import {HashRouter as Router} from "react-router-dom"
ReactDOM.render(
    <Router>
        <App />
    </Router>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js:

import React from 'react';
import './App.css';
import One from './components/one'
import Test from './components/test'
import Test2 from './components/test2'
import {Route,NavLink,Redirect,Switch} from 'react-router-dom'
// Router:路由实例
// Route:每一个路由
var NotFound=()=>{
  return <div>404</div>
}
function App() {
  return (
    <div className="App">
      <NavLink to="/one">One</NavLink>
      <NavLink to="/test">Test</NavLink>
      <NavLink to="/test2">Test2</NavLink>
      <Switch>
        <Route path="/test" component={Test} />
        <Route path="/test2" component={Test2} />
        <Route path="/one" component={One }/>
        <Redirect from="/" to="/test" exact />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}
export default App;

test组件：index.js

import React, { Component } from 'react'
export default class Test2 extends Component {
    render() {
        return (
            <div>
                test2
            </div>
        )
    }
}

以上便是本小白的见解啦，欢迎大佬们的补充与指正！