React 路由-阿里云开发者社区

React 路由

2022-06-09 128

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React 路由

ReactRouter三大组件：

Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器
Route：路由规则匹配组件，显示当前规则对应的组件
Link：路由跳转组件
Redirect: 路由重定向
replace: 前进后无法后退，常用于登录后
push：页面栈+1
Switch：当路由中有一样的路径，就会默认只显示第一个
switch：

import react from 'react'
import { BrowserRouter as Router, Link, Route, Redirect, Switch } from 'react-router-dom'
class App extends react.Component {
  render() {
    return (
      <div>
        <Router>
          <Switch>
            <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="/abc" exact component={() => (<h1>123</h1>)}></Route>
            <Route path="/abc" exact component={() => (<h1>1234</h1>)}></Route>
          </Switch>
        </Router>
      </div>
    )
  }
}
localhost:3000/abc   =>   只显示123
复制代码

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

import React from 'react'
import ReactDom from 'react-dom'
// hash模式
// import { HashRouter as Router, Link, Route } from 'react-router-dom'
// history模式 / 后端配合使用
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
  return (
    <div>
      <h1>首页</h1>
    </div>
  )
}
function Product() {
  return (
    <div>
      <h1>产品页面</h1>
    </div>
  )
}
function Me() {
  return (
    <div>
      <h1>我的</h1>
    </div>
  )
}
// Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器
// Route： 路由规则匹配组件， 显示当前规则对应的组件
// Link：路由跳转组件
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return (
      <div id="app">
        <div>所有页面普通内容</div>
        <Router basename="/">  {/* basename 就是在路径前加一个前缀 */}
          <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to="/me">个人中心</Link>
          </div>
          <Route path="/" exact component={ Home }></Route>
          <Route path="/product" component={ Product }></Route>
          <Route path="/me" component={ Me }></Route>
        </Router>
      </div>
    )
  }
}
ReactDom.render(<App />, document.getElementById('root'))
复制代码

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

如：

import React from 'react'
import ReactDom from 'react-dom'
// hash模式
// import { HashRouter as Router, Link, Route } from 'react-router-dom'
// history模式 / 后端配合使用
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
function Home() {
  return (
    <div>
      <h1>首页</h1>
    </div>
  )
}
function Product() {
  return (
    <div>
      <h1>产品页面</h1>
    </div>
  )
}
function Me(props) {
  console.log(props)
  return (
    <div>
      <h1>我的</h1>
    </div>
  )
}
// Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器
// Route： 路由规则匹配组件， 显示当前规则对应的组件
// Link：路由跳转组件
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    const meObj = {
      pathname: "/me",  // 跳转的路径
      search: '?username=admin',   // get请求数据
      hash: '#abc',   // 设置的hash值
      state: { msg: 'hello world' } // 传入组件的数据
    }  // 路径拼接
    return (
      <div id="app">
        <div>所有页面普通内容</div>
        <Router basename="/">  {/* basename 就是在路径前加一个前缀 */}
          <div className="nav">
            <Link to="/">Home</Link>
            <Link to="/product">Product</Link>
            <Link to={ meObj }>个人中心</Link>
            {/* replace 删除页面栈，无法后退 */}
            <Link to={ meObj } replace>个人中心</Link>
          </div>
          <Route path="/" exact component={ Home }></Route>
          <Route path="/product" component={ Product }></Route>
          <Route path="/me" component={ Me }></Route>
        </Router>
      </div>
    )
  }
}
ReactDom.render(<App />, document.getElementById('root'))
复制代码

link的replace属性：点击链接后，将新地址替换成历史访问记录的原地址

动态路由实现

网络异常，图片无法展示

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

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>
  else return <Redirect to="login"></Redirect>
}
const FormCom = () => {
  const pathObj = {
    pathname: '/loginInfo',
    state: {
      loginState: 'success'
    }
  }
  return (
    <div>
      <h1>表单验证</h1>
      <Link to={ pathObj }>登录验证后页面</Link>
    </div>
  )
}
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  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>
        </Router>
      </div>
    )
  }
}
export default App

React 路由

ReactRouter三大组件：

动态路由实现

热门文章

最新文章

相关课程

相关电子书