Branson

Branson 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

Branson 发布了文章 · 4月8日

react-router官网demo解析2-URL参数

源码:

example.js

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

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
  let { id } = useParams();
  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './example';

ReactDOM.render(
<App />,
document.getElementById('root')
);

index.html

<div id="root"></div>
效果图:

image.png

相关知识:

path="/:id": 表示匹配的路径为 / ,冒号表示路径后面所带的参数,即 / 后面的内容作为id的值。

useParams(): 返回一个key-value组成的对象,对象里是当前匹配到的路由的参数。这个例子中内容就是key为id,value为对应的值netflix,zillow-group,yahoo或者modus-create中的一个。

例如:此时路径为/zillow-group/si,则id = zillow-group。
useParams()为{id: zillow-group}。 即只会匹配到 / 后到第一个路径分支。 /si不会作为参数传到id。

下一节:

react-router官网demo解析3-嵌套路由

查看原文

赞 0 收藏 0 评论 0

Branson 发布了文章 · 4月8日

react-router5官网demo解析3-嵌套路由

源码:

example.js

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
  useRouteMatch
} from "react-router-dom";

export default function NestingExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function Topics() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  let { topicId } = useParams();

  return (
    <div>
      <h3>{topicId}</h3>
    </div>
  );
}
效果图:

image.png
————————————————————分割线———————————————————
image.png

相关知识:

嵌套路由:实现嵌套路由需要在一个<Route></Route>包裹的子组件中再使用<Route></Route>进行包裹内容即可。例如上面的 <Topics />组件。

useRouteMatch( ): 不带参数的时候,返回当前组件路由匹配到的路径内容。
如果带参数,则相当于<Route></Route>的功能,可以进行路由匹配的判断,并且不需要渲染<Route>组件。

解析:

页面由两个部分组成,ul包裹的两个link标签Home和Topics以及<Switch>包裹的路由组件,其中只有一个路由会被匹配并渲染。
前两个图,是页面的主要两个组件,<Home />和 <Topics />根据路由为/ 或者 /topics进行对应的渲染。
对于<Topics />组件,里面又包括两个部分,<h2>Topics</h2>,ul包裹的三个link和
<Switch>包裹的路由组件。这里面的路径必须和之前的路径进行拼接,
例如

<Link to={`${url}/rendering`}>Rendering with React</Link>
<Route path={`${path}/:topicId`}>

这样才可以对之前对内容进行保留。例如:
路径为:/topics/components 则会分别匹配到<Route path="/topics"> 渲染出<Topics />并且匹配到<Route path={${path}/:topicId}>渲染出<Topic />。

查看原文

赞 0 收藏 0 评论 0

Branson 发布了文章 · 4月7日

react-router官网demo解析1-基础使用

源码

example.js

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

export default function BasicExample() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/dashboard">Dashboard</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/dashboard">
            <Dashboard />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

// You can think of these components as "pages"
// in your app.

function Home() {
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
    </div>
  );
}

index.html

<div id="root"></div>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './example';

ReactDOM.render(
<App />,
document.getElementById('root')
);
效果图:

image.png

相关知识:

<Router></Router>: 一般用来包裹整个react页面,表示这是一个单页面应用,靠路由进行页面的动态渲染。

<Link to="/">Home</Link>: 相当于标签,点击就切换路由到to指定的路径。

<Switch></Switch>:被<Switch>包裹的<Route>最多只有一个会被匹配并进行渲染。匹配的顺序是按照<Route>从上往下进行匹配,页面当前的路径与<Route> 的path一致时候,匹配成功,渲染<Route>内部元素。
注:假如没有<Switch>包裹住<Route>,则可能匹配多个<Route>并渲染。

<Route></Route>:根据path参数进行匹配并渲染其子组件内容。

解析:

根据上述知识,页面的结构主要是两个部分,一个是固定不变的<ul>列表包裹的三个link标签,一个是根据页面的path,即效果图中蓝色画线部分进行匹配的<Route>部分。
点击不同的link超链接,页面的path会改变,从而<Switch>中的不同<Route>会被匹配渲染在下面。
例如:点击About,页面的网址变为https://bnpsd.csb.app/about 此时path为 /about。匹配到<Route path="/about">,渲染出<About />子组件。

下一节:
react-router官网demo解析2-URL参数

查看原文

赞 0 收藏 0 评论 0

Branson 关注了用户 · 2020-10-06

Jason @jason_5f0dbb9eaae42

以终为始,闭环迭代,持续提高。

关注 3577

Branson 关注了专栏 · 2020-10-06

前端食堂

个人公众号:前端食堂 你的前端食堂,记得按时吃饭~

关注 2823

Branson 关注了用户 · 2020-10-06

MysteryJack @mysteryjack

codeing.....
微信公众号:Java菜鸟程序员

关注 304

Branson 关注了用户 · 2020-10-06

凹凸实验室 @o2team

凹凸实验室(Aotu.io,英文简称O2) 始建于2015年10月,是一个年轻基情的技术团队。

O2面向多终端技术体系,致力于构建沉淀与分享包括但不限于交互、页面制作技巧、前端开发、原生APP开发等方面的专业知识及案例。

求简历:aotu@jd.com

关注 1850

Branson 关注了专栏 · 2020-10-06

民工哥技术之路

公众号:民工哥技术之路、《Linux系统运维指南 从入门到企业实战》作者。专注系统架构、高可用、高性能、高并发,数据库、大数据、数据分析、Python技术、集群中间件、后端等开源技术分享。

关注 31981

Branson 关注了专栏 · 2020-10-06

疯狂的技术宅

本专栏文章首发于公众号:前端先锋 。

关注 31420

Branson 关注了专栏 · 2020-10-06

终身学习者

我要先坚持分享20年,大家来一起见证吧。

关注 57075

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2020-10-06
个人主页被 210 人浏览