React路由

React路由

1. 路由的功能：从一个视图(页面)跳转到另一个视图(页面)
2. 在react中，路由就是配置路径URL和组件（配对）
3. 路由的基本使用

• 安装：yarn add react-router-dom(npm i react-router-dom）
• 导入路由的三个核心组件：Router/Route/Link

//使用的是BrowserRouter  起的别名是Router
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'

• 使用Router组件包裹整个应用

<Router>
	<div className='App'>页面内容</div>
</Router>

• 使用Link组件作为导航菜单（路由入口）

<Link to="/first">页面一</Link>

• 使用Router组件配置路由规则和要展示的组件（路由出口）

//Route是定义路由规则，Link是跳转页面
const First = () => <p>页面一的页面内容</p>
<Router>
	<div className="App">
//path定义路径，就是常说的路由地址，component指定到了这个地址后用哪个组件来显示 
		<Route path="/first" component={First}></Route>
		<Link to="/first">页面一</Link>
	</div>
</Router>
//注意：Route不仅定义规则，并且指定显示页面位置（写在哪里就显示在哪里）

4. 路由的执行过程

• 点击Link组件（a标签），修改了浏览器地址栏中的url。
• React路由监听到地址栏url的变化
• React路由内部遍历所有的Route组件，使用路由规则(path)与pathname进行匹配
• 当路由规则（path）能够匹配地址栏中的pathname时，就显示该Route组件的内容

//简单实现案例
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
// import Mouse from  './Mouse'
// ReactDOM.render(<Mouse />,document.getElementById('root'))
// 1.安装路由
// 2.引入路由
// 3.使用路由组件包裹整个应用
// 4.定义路由规则：Router定义路径和组件的对应关系
// 5.使用路由进行页面跳转：Link
import { BrowserRouter as Router,Route,Link } from 'react-router-dom'
const First = (props) => {
  function handleClick() {
    // // 去second页面
    props.history.push('/second')
    }
  return (
    <div>
      <h1>first 页面内容</h1>
      <button onClick={handleClick}>去往second页面</button>
    </div>
  )
}
const Second = (props) => {
  function handle() {
    // 后退到first 
      props.history.go(-1)
   }
  return (
    <div>
      <h1>Second 页面内容</h1>
      <button onClick={handle}>后退到first页面</button>
    </div>
  )
}
class App extends Component{
  render(){
    return (
      <Router>
        <div>
          <h1>页面内容</h1>
          <Link to="/first">first </Link>
          <br/>
          <Link to="/second">second</Link>
 		      <Route exact path="/first" component={First}></Route>
          {/* <Route path="/first" component={Second}></Route> */}
          {/* 给Route组件 添加exact属性 表示精确匹配 */}
          <Route exact path="/second" component={Second}></Route>
 	      </div>
      </Router>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'))