React路由

v6版本与v5版本相比 v6有破坏性更新

这里用的是v5选相关的版本

1.安装使用 yarn add react-router-dom@5.3.0=

2.导入Router / Route / Link

3.Router包裹整个组件

4.Link作为路由的入口

5.Route 组件配置路由的规则和要展示的组件(出口)

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

const First = () => <p>页面一的页面内容</p>

const App = () => {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            {/*
              to属性：浏览器地址栏中的pathname（location.pathname）
            */}
            <Link to="/first">页面一</Link>
          </li>
        </ul>
        
        {/*
          path属性：路由规则
          component属性：展示的组件
          Route 组件写在哪，渲染出来的组件就展示在哪
        */}
        <Route path="/first" component={First}></Route>
      </div>
    </Router>
 	)
}

React路由-Router模式

1.Router包裹整个应用，一个 React 应用只需要使用一次

2.常用的Router有两种  BrowserRouter和HashRouter

React路由-Link  和  NavLink组件

Link用于指定导航链接,会渲染成为a标签  其属性to   会渲染很a  的href属性

NavLink  可以在路由匹配的时候获得高亮的类名加持,activeClassName 指定 高亮的类名,active为默认,样式需要自己去配置

默认情况下   模糊匹配

      ：只要 浏览器地址栏中的 patchname（比如：/search/a）是以 NavLink to（/search） 属性的值开头的，此时，就会匹配成功

但是会导致所有的路由组件可能都会显示,要作用到exact 精确匹配解决,表示必须精确匹配（to 属性值和浏览器地址栏中的 pathname 相同），类名才生效

React路由-Route组件

Route 组件：用来配置路由规则

• path 属性，指定路由规则
• component 属性，指定要渲染的组件
• children 子节点，指定要渲染的组件

// 用法一：使用 component 属性指定要渲染的组件
<Route path="/search" component={Search} />

// 用法二：使用 children 指定要渲染的组件
<Route path="/search">
	<Search />
</Route>

对于 Route 来说，如果路由规则匹配成功，那么，就会渲染对应组件；否则，渲染 null 或者说不渲染任何内容

对于 Route 组件来说，path 属性是可选的：

//如果 Route 组件没有 path 属性，表示：该路由永远匹配成功，一定会渲染该组件

<Route>
	<SomeComponent />
</Route>