根据不同的路径,显示不同的组件(内容); React使用的库react-router-dom 安装

npm install react-router-dom --save

React 基础路由

ReactRouter三大组件

Router: 所用路由组件的根组件(底层组件),包裹路由规则的最外层容器

属性: basename: ->设置跟此路由根路径,router可以在一个组件中写多个

<Router basename = "admin"></Router>
// url 输出 http://localhost:3000/admin/

Route: 路由规则匹配组件,显示当前规则对应的组件

Link: 路由跳转组件 to属性匹配Route path路径值

注意: 如果要精确匹配,那么可以在route上设置exact属性

代码示例:

<div id="app">
        <div>所有页面普通内容</div>
        <Router basename="/admin">
          <div className="nav">
            <Link to='/'>Home</Link>
            <Link to='/product'>Product</Link>
            <Link to='/me'>Me</Link>
          </div>
          <Route exact path="/" component={Home}></Route>  // Home Product Me 是3个组件
          <Route  path="/product" component={Product}></Route>
          <Route  path="/me" component={Me}></Route>
        </Router>
      </div>

link组件可以设置to属性来进行页面的跳转,to属性可以直接些路径的字符串,也可以通过1个对象,进行路径的设置

示例

class App extends React.Component{
  render(){
    let meObj = {
      pathname: "/me", // 跳转路径 
       search: "?username=admin", // get请求参数
       hash:"#abc", // 设置HASH值
       state:{msg: "hello word"} // 传入组件的数据
     };
    return(
      <div id="app">
        <div>所有页面普通内容</div>
        <Router basename="/admin">
          <div className="nav">
            <Link to='/'>Home</Link>
            <Link to='/product'>Product</Link>
            <Link to={ meObj }>Me</Link> // to= { {} } 中间的大括号代表的是对象
          </div>
          <Route exact path="/" component={Home}></Route>
          <Route  path="/product" component={Product}></Route>
          <Route  path="/me" component={Me}></Route>
        </Router>
      </div>
    )
  }
}

Link的replace属性:点击链接后,将新地址替换成历史访问记录的原地址.

Link to={ meObj } replace >Me</Link>

动态路由实现

function News(props) {
  console.log(props);
  return (
    <div>
      新闻页、新闻id：{props.match.params.id}
    </div>
  );
}
class App extends React.Component{
  render(){
    return(
      <div id="app">
        <div>所有页面普通内容</div>
        <Router basename="/admin">
          <div className="nav">
            <Link to='/news/456789'> News</Link>
          </div>
          <Route  path="/news/:id" component={News}></Route>
        </Router>
      </div>
    )
  }
}

重定向组件

如果访问某个组件时,如果有重定向组件,那么就会修改页面路径,使得页面内容显示为所定向路径的内容

用例

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

function LoginInfo(props){
  console.log(props);
  if(props.location.state.loginState === 'success'){
      // return <Redirect to="/admin"></Redirect>
      return <Redirect to="/admin" component={Admin}></Redirect>
  }else{
    return <Redirect to="/login"></Redirect>
  }
}
const FormCom = () => {
  let pathObj = {
    pathname: '/loginInfo',
    state:{
      loginState:'success'
    }
  }
  return(
    <div>
      <h1>表单验证</h1>
      <Link to={pathObj}>登录验证后页面</Link>
    </div>
  )
}
const Admin = () =>{
  return(
    <h1>Admin</h1>
  )
}
class App extends React.Component{
  render(){
    return(
      <div>
        <Router>
          <Route path="/" exact component={()=>(<h1>首页</h1>)}></Route>
          <Route path="/form" exact component={FormCom}></Route>
          <Route path="/login" exact component={()=>(<h1>登录页</h1>)}></Route>
          <Route path="/loginInfo" exact component={LoginInfo}></Route>
          <Route path="/admin" exact component={Admin}></Route>
        </Router>
      </div>
    )
  }
}
export default App;

Switch组件

让switch组件内容的route只匹配1个,只要匹配到了,剩余的路由规则将不再匹配

用力!

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

class App extends React.Component{
  render(){
    return(
      <div>
        <Router>
          <Switch>
            <Route path="/abc" exact component={()=>(<h1>abc1</h1>)}></Route>
            <Route path="/abc" exact component={()=>(<h1>abc2</h1>)}></Route>
          </Switch>
        </Router>
      </div>
    )
  }
}

使用Switch组件页面最终只呈现第一次匹配到的route,不使用Switch组件,将会呈现出所有的匹配route

组件间的跳转

用力!

class ChildCom extends React.Component{
  render(){
    const pathObj = {
      pathname: '/',
      code: 1,
      msg: '发送的数据'
    }
    return(
      <div>
        <button onClick= {this.clickEvent.bind(this,pathObj)}>跳转到首页</button>
      </div>
    )
  }
  clickEvent = (path)=>{
    console.log(this.props);
    console.log(path);
    this.props.history.push(path);
    // 不能返回上个页面
    // this.props.history.replace(path);
    // // 前进
    // this.props.history.go(1);
    // this.props.history.goForward();
    // // 后退
    // this.props.history.go(-1);
    // this.props.history.goBack();
  }
}

class App extends React.Component{
  render(){
    return(
      <div>
        <Router>
          <Switch>
            <Route path="/:id" exact component={()=>(<h1>首页</h1>)}></Route>
            <Route path="/childCom" exact component={ChildCom}></Route>
          </Switch>
        </Router>
      </div>
    )
  }
}