React 路由学习 01

其他 2021-01-26 08:24:30 阅读次数: 0
学习目标
  • 路由基本概念
  • 通过实例学习路由
Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器。
 
根据不同的路径，显示不同的组件（内容）；React使用的库react-router-dom;
 
  • react-router 核心组件
  • react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
  • react-router-native 应用于native端的路由
进行网站（将会运行在浏览器环境中）构建，应当安装react-router-dom。react-router-dom暴露出react-router中暴露的对象与方法。
  • <BrowserRouter> 浏览器的路由组件
  • <HashRouter> URL格式为Hash路由组件
  • <MemoryRouter> 内存路由组件
  • <NativeRouter> Native的路由组件
  • <StaticRouter> 地址不改变的静态路由组件
三大组件使用的关系：
 
 
如果说我们的应用程序是一座小城的话，那么Route就是一座座带有门牌号的建筑物，而Link就代表了到某个建筑物的路线。有了路线和目的地，那么就缺一位老司机了，没错Router就是这个老司机。
 
 
安装路由：cnpm install react-router-dom --save
 

实例一 一个路径匹配一个组件

import React from 'react';

//hash模式，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>admini首页</h1>
      </div>
  )
}


function Me(){
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}

function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}

class App extends React.Component{
  render(){
      return (
          <div id="app">
              {/* <div>所有页面普通内容</div> */}
              {/* <Router>
                  <Route path="/" exact component={()=>(<div>首页</div>)}></Route>
                  <Route path="/me" component={()=>(<div>me</div>)}></Route>
                  <Route path="/product" component={()=>(<div>product</div>)}></Route>
              </Router> */}


              <Router>
                  <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>
      )
  }
}

export default App

实例二 base路径

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

function Home(){
  return (
      <div>
          <h1>admini首页</h1>
      </div>
  )
}

function Me(){
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}

function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}

class App extends React.Component{
  render(){
      return (
          <div id="app">
              <div>所有页面普通内容</div>
              <Router basename="/admin">
                  <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>
      )
  }
}

export default App

属性：basename->设置跟此路由根路径，router可以在1个组件中写多个。
 
Route:路由规则匹配组件，显示当前规则对应的组件。
Link:路由跳转的组件
 

实例三 多个router

import React from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
function Home(){
  return (
      <div>
          <h1>admini首页</h1>
      </div>
  )
}
function Me(){
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}
function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}
class App extends React.Component{
  render(){
      return (
          <div id="app">
              <div>所有页面普通内容</div>
              <Router>
                <Route path='/' component={()=>(<div>首页</div>)}></Route>
                <Route path='/product' component={()=>(<div>产品</div>)}></Route>
                <Route path='/me' component={()=>(<div>个人中心</div>)}></Route>
              </Router>
              <Router basename="/admin">
                  <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>
      )
  }
}
export default App

实例三 exact

import React from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
function Home(){
  return (
      <div>
          <h1>admini首页</h1>
      </div>
  )
}
function Me(){
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}
function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}
class App extends React.Component{
  render(){
      return (
          <div id="app">
              <Router>
                <Route path='/' component={()=>(<div>首页</div>)}></Route>
                <Route path='/product' component={()=>(<div>产品</div>)}></Route>
                <Route path='/me' component={()=>(<div>个人中心</div>)}></Route>
              </Router>
              <Router basename="/admin">
                  <Route path="/" exact component={Home}></Route>
                  <Route path="/product" component={Product}></Route>
                  <Route path="/me" component={Me}></Route>
              </Router>
          </div>
      )
  }
}
export default App

import React from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
function Home(){
  return (
      <div>
          <h1>admini首页</h1>
      </div>
  )
}
function Me(){
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}
function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}
class App extends React.Component{
  render(){
      return (
          <div id="app">
              <Router>
                <Route path='/' exact component={()=>(<div>首页</div>)}></Route>
                <Route path='/product' component={()=>(<div>产品</div>)}></Route>
                <Route path='/me' component={()=>(<div>个人中心</div>)}></Route>
              </Router>
              <Router basename="/admin">
                  <Route path="/" exact component={Home}></Route>
                  <Route path="/product" component={Product}></Route>
                  <Route path="/me" component={Me}></Route>
              </Router>
          </div>
      )
  }
}
export default App

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

实例四 Link

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

import React from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
function Home(){
  return (
      <div>
          <h1>admini首页</h1>
      </div>
  )
}
function Me(props){
  console.log(props)
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}
function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}
class App extends React.Component{
    render(){
      let meObj = {
          pathname:"/me",//跳转的路径
          search:"?username=admin",//get请求参数
          hash:"#abc",//设置的HASH值
          state:{msg:'helloworld'}//传入组件的数据
      };
      return (
          <div id="app">
              <Router>
                  <div className="nav">
                      <Link to="/">Home</Link>
                      <Link to="/product">Product</Link>
                      <Link to={ meObj }>个人中心</Link>
                  </div>
                  <Route path="/" exact component={Home}></Route>
                  <Route path="/product" component={Product}></Route>
                  <Route path="/me" component={Me}></Route>
              </Router>
          </div>
      )
  }
}
export default App

实例五 replace

Link的replace属性：点击链接后，将新地址替换成历史访问记录的原地址。
 
  
import React from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
function Home(){
  return (
      <div>
          <h1>admini首页</h1>
      </div>
  )
}
function Me(props){
  console.log(props)
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}
function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}
class App extends React.Component{
    render(){
      let meObj = {
          pathname:"/me",//跳转的路径
          search:"?username=admin",//get请求参数
          hash:"#abc",//设置的HASH值
          state:{msg:'helloworld'}//传入组件的数据
      };
      return (
          <div id="app">
              <Router>
                  <div className="nav">
                      <Link to="/">Home</Link>
                      <Link to="/product">Product</Link>
                      <Link to={ meObj } >个人中心</Link>
                  </div>
                  <Route path="/" exact component={Home}></Route>
                  <Route path="/product" component={Product}></Route>
                  <Route path="/me" component={Me}></Route>
              </Router>
          </div>
      )
  }
}
export default App

实例六 动态路由

import React from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
function Home(){
  return (
      <div>
          <h1>admini首页</h1>
      </div>
  )
}
function Me(props){
  console.log(props)
  return (
      <div>
          <h1>admin个人中心</h1>
      </div>
  )
}
function Product(){
  return (
      <div>
          <h1>admin产品页面</h1>
      </div>
  )
}
function News(props) {
  return (
    <div>
      新闻页，新闻id：{props.match.params.id}
    </div>
  )
}
class App extends React.Component{
    render(){
      let meObj = {
          pathname:"/me",//跳转的路径
          search:"?username=admin",//get请求参数
          hash:"#abc",//设置的HASH值
          state:{msg:'helloworld'}//传入组件的数据
      };
      return (
          <div id="app">
              <Router>
                  <div className="nav">
                      <Link to="/">Home</Link>
                      <Link to="/product">Product</Link>
                      <Link to={ meObj } >个人中心</Link>
                      <Link to="/news/123456">新闻</Link>
                  </div>
                  <Route path="/" exact component={Home}></Route>
                  <Route path="/product" component={Product}></Route>
                  <Route path="/me" component={Me}></Route>
                  <Route path="/news/:id" component={News}></Route>
              </Router>
          </div>
      )
  }
}
export default App

链接“新闻”组件时，可以动态传入id。

参考链接：

React Router教程：https://www.jianshu.com/p/6583b7258e78

猜你喜欢

转载自blog.csdn.net/A_bad_horse/article/details/105620255
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022