react路由

安装

npm i react-router-dom -S

导入路由需要的组件

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
【常用路由组件如下：】

• BrowserRouter as Router
  浏览器路由 别名为Router
• Link导航 to切换的页面
• Route路由页面--path对应链接component对应组件
• BrowserLink
  带active激活的class路由连接

简单路由代码

import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
// 导入子组件
class App extends Component {
  render() {
    return (
      <div className="App" >    
        <Router>
          <div>  <Link to="/">首页</Link> | <Link to="/about">关于</Link> </div>
          <hr/>
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
        </Router>  
      </div>
    );
  }
}
function Home(){
  return (<h1>我是首页</h1>);
}
function About(){
  return (<h1>我是关于</h1>);
}
export default App;

路由的参数

• 步骤01：定义指令Link指令
  <Link to="/produce/123">产品123</Link> <Link to="/produce/abc">产品abc</Link>
• 步骤02:定义路由
  <Route path='/produce/:id' component={Produce}></Route>
• 步骤03:定义组件-获取路由参数
  function Produce({match}){ return (<h1>我是产品:{match.params.id}</h1>); }
  [match 是组件默认传递的参数， match.paras 组件路由参数对象, 还有 history对象和location对象]

子路由

• 步骤01：导入NavLink
  import {BrowserRouter as Router,Route,Link,NavLink} from 'react-router-dom'
• 步骤02：定义指令NavLink
  <NavLink to="/detail">详情</NavLink>
• 步骤03：定义主路由
  <Route path="/detail" component={Detail}></Route>
• 步骤04：编写主路由

function Detail({location,match}){
  return (
    <div>
      <div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
      <hr/>
      <Route path={match.url+'/arg'} component={Arg}></Route>
      <Route path={match.url+'/com'} component={Com}></Route>
    </div>);
}

[match.url 获取当前匹配的主路由地址]

• 步骤05：编写子路由

function Arg(){
  return (<h1>我是Arg      </h1>);
}
function Com(){
  return (<h1>我是com</h1>);
}

404页面配置和Switch组件

[Switch能让匹配的路由唯一]
[定义404，要写在最后]
[location 当前的地址]
[pathname 地址栏的信息]

• 步骤01：导入Switch
  import {BrowserRouter as Router,Route,Link,Switch,NavLink,Redirect} from 'react-router-dom'
• 步骤02：定义路由

<Switch>
  <Route path="/" exact component={Home}></Route>
  <Route path="/about" component={About}></Route>
  <Route path="/produce/:id" component={Produce}></Route>
  <Route path="/detail" component={Detail}></Route>
  <Route component={NoMatch}></Route>
</Switch>

• 步骤03：编写404路由
  function NoMatch({location}){ return (<h1>页面没有找到{location.pathname}</h1>); }

路由重定向

• 导入重定向组件Redirect
• 重新编写主路由

function Detail({location,match}){
  return (<div>
      <div><NavLink to={match.url+'/arg'}>参数</NavLink> | <NavLink to={match.url+'/com'}>评论</NavLink> | </div>
      <hr/>
      <Switch>
      <Route path={match.url+'/arg'} component={Arg}></Route>
      <Route path={match.url+'/com'} component={Com}></Route>      
      <Redirect from={match.url} to={match.url+'/arg'}/>
      </Switch>
    </div>);
}

路由组件的参数

• history

goBack() 返回
goForward() 前进
push('/') 切换跳转
replace 跳转不留历史记录

• location 地址栏信息

pathname路径

• match

params路由参数
url 配置的地址

路由如何传参

props