React-路由

React路由

一、路由介绍

• 前端路由是url路径与组件的对应关系

二、使用步骤

• 1.基本使用npm add react-router-dom
• 2.导入三个核心组件： Router/Route/Link

// HashRouter\BrowserRouter两种模式,推荐BrowserRouter
    import {BrowserRouter as Router,Route,Link} from 'react-router-dom'

• 3.使用Router组件包裹整个应用
• 4.Link组件作为导航菜单
• 5.使用Route组件配置路由规则和要展示的组件（路由出口）

const First = () => <p>页面一的页面内容</p>
    <Router>
        <div>
            <Link to="/first">页面一</Link>
            <Route path="/first" component={First}></Route>
        </div>
    </Router>

三、执行过程

1. 点击link组件，修改浏览器地址url
2. React路由监听到地址栏url的改变
3. React路由内部遍历所有Route组件，使用路由规则（path）与pathname进行匹配
4. 当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件的内容

四、编程式导航

• 通过js代码实现页面跳转
• history是React路由提供的，用于path表示要跳转的路径

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

class Login extends React.Component {
    render() {
        return (
            <div>
                <h1>编程式导航</h1>
                <button onClick={this.handleLogin}>去首页</button>
            </div>
        )
        handleLogin = () => {
            this.props.history.push('/home')
        }
    }
}

const Home = (props) => (
    const handleBack = () => {
        props.history.go(-1)
    }
    return (
        <div>
            <h1>我是后台首页</h1>
            <button onClick={}></button>
        </div>
    )
)

const App = () => {
    <Router>
        <div>
            <h1>编程式导航</h1>
            <Link to="/login">去登陆页面<Link>
            <Route path="/login" component={Login}></Route>
            <Route path="/home" component={Home}></Route>
        </div>
    </Router>
}

五、默认路由

<Router path="/" component={Home}></Router>

六、模糊匹配

1. 默认情况下，React路由是模糊匹配模式
2. 只要是pathname以path开头就会匹配成功

七、精确匹配

• 给Route组件添加exact属性，让其变为精确匹配模式

<Route exact path="/" component={Home}></Route>

六 router4

• BrowserRouter,包裹整个应用

• router路由对应渲染的组件，可嵌套

• link跳转专用

• url参数，Route组件参数可用冒号表示参数

• Reduirect组件 跳转

• Switch只渲染一个子Route组件

npm install react-router-dom --save

import {BrowserRouter,Route,Link,Redirect,Switch} from 'react-router-dom'

ReactDom.render(
 <BrowserRouter>
   <ul>
     <li>
       <Link to="/">
       一营
     </Link>
     </li>
     <li>
       <Link to="/erying">
       二营
     </Link>
     </li>erying
   </ul>
   <Switch>
     <Redirect to="/"></Redirect>
     <Route path="/:location" component={Text}></Route>
     <Route path="/erying" component={erying}></Route>
   </Switch>
 </BrowserRouter>
)

class Test extends React.component{
 render() {
   return <h2>{this.props.match.params.location}</h2>
 }
}