知识点小记🌟🌟🌟🌟🌟：React-路由：2019-06-05

1.安装：为了让react支持路由，需要安装react-router-dom

npm i react-router-dom@4.3.1  //命令行

2.引入组件BrowserRouter：

//引入
import {BrowserRouter} from "react-router-dom";
//如何使用
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

像下面的browserouter组件记录了浏览器的历史，并传入各组件树🌲成员，组件树🌲中的任何组件都可以使用“历史对象”,这也是这个组件的用途

3.注册：引入Route组件；满足path里面的条件，渲染后面对应的组件；举个🌰；如果url满足/products，就渲染后面的Products组件，其他的同理。

class App extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <div className="content">
          <Route path="/products" component={Products}/>
          <Route path="/posts" component={Posts}/>
          <Route path="/admin" component={Dashboard}/>
          <Route path="/" exact component={Home}/>// 确保只有在“完全匹配”的时候才会显示后面的组件
        </div>
      </div>
    );
  }
}
export default App;

4.Switch组件：<Switch> 会遍历嵌套的所有 <Route />，并且只渲染第一个匹配的 <Route />，这对于当有多个 <Route /> 同时匹配的时候，排除那些不想要渲染的 <Route /> 时非常有用。
同样是通过react-router-dom引入；

// path 为 '/about' 时，3 个 Route 将同时匹配
<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

// 如果不使用 Switch，404 则会一直渲染
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />

  // 当上面都不匹配时，渲染 404 页面
  <Route component={NoMatch} />
</Switch>

5.Link组件：<Link> 组件会生成有路由切换功能的 <a> 标签。(和直接使用a标签的路由不同的是，Link不会在每次点a标签的时候重新发请求)
过程：

link组件里的a标签还有一个onclick函数.png

如上图所示，当我们点击a标签🏷️的时候，句柄被调用，阻止了a标签原本的行为，所以浏览器没有发新的请求，因为被调用的句柄只会更新url，而url改变，路由就会匹配url并渲染新的组件。

6.传入属性：传属性需要将component换成render并添加箭头函数，箭头函数里面使用组件，并正常传入属性即可。传入props是因为Route自己还有默认属性，所以箭头函数要传入props参数，在保留旧的原有的属性的前提下，添加新的。
（如果不传入props参数，在控制台查看的时候会发现，之前的诸如location等属性不见了）

        <Switch>
            <Route path="/products" render={(props)=><Products sortBy="OGM" {...props}/>}/>
             //传属性需要将component换成render并添加箭头函数，箭头函数里面使用组件，并正常传入属性即可。
            <Route path="/posts" component={Posts}/>
            <Route path="/admin" component={Dashboard}/>
            <Route path="/"component={Home}/>
         </Switch>

控制台显示最终结果：

传入props参数后

7.路由的参数：
a）传递路由参数：/:+参数
b)可选参数：/:+参数？（让传递的参数可以可有可无）

          <Switch>
            <Route path="/products/:id" component={ProductDetails} />
            <Route path="/products" render={(props)=><Products sortBy="OGM" {...props}/>}/>
            <Route path="/posts/:year/:mouth" component={Posts}/>
            <Route path="/admin" component={Dashboard}/>
            <Route path="/"component={Home}/>
          </Switch>

b)处理： 通过props.match.params+属性字段获得传递的参数

const Posts = ({match}) => {
  return (
    <div>
      <h1>Posts</h1>
      Year:{match.params.year} , Month:{match.params.month}
    </div>
  );
};

8.查询字符串：
例如：http://localhost:3000/posts/2018/06?srotBy=newwst&approved=true
“?srotBy=newwst&approved=true”就是要查询的字符串。
在react控制台中的“对应组件”中可以看到，在props的location的search属性中可以看到要查询的字符串。如果要获取的话，可以通过插件queryString来获取。

关于query-string：

//安装
npm i query-string@6.1.0
//引入以及使用
import React from "react";
import queryString from "query-string";
 const Posts = ({match,location}) => {
  const result=queryString.parse(location.search);
  console.log(result);
  return (
    <div>
      <h1>Posts</h1>
      Year:{match.params.year} , Month:{match.params.month}
    </div>
  );
};
export default Posts;

9.路由嵌套：

//sidebar组件
import React from 'react';
import {Link} from "react-router-dom";
const SideBar = (props) => {
    return ( 
     <ul>
        <li>
          <Link to="/admin/posts">Posts</Link>
        </li>
        <li>
          <Link to="/admin/users">Users</Link>
        </li>
      </ul>
     );
} 
export default SideBar;
//父级组件
import React from "react";
import SideBar from "./sidebar";
import {Route} from "react-router-dom";
import Posts from '../posts';
import Users from './users';
const Dashboard = ({ match }) => {
  return (
    <div>
      <h1>Admin Dashboard</h1>
      <SideBar/>
      <Route path="/admin/posts" component={Posts}/>
      <Route path="/admin/users" component={Users}/>
    </div>
  );
};

export default Dashboard;

Link用于改变url;Router主要是在url变化的时候渲染出对应的组件来;