Question

我刚刚查看了react中组件之间的示例，并看到了一个示例HERE：

import React from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect
} from "react-router-dom";

/* you'll need this CSS somewhere
.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}
*/

const AnimationExample = () => (
  <Router>
    <Route
      render={({ location }) => (
        <div style={styles.fill}>
          <Route
            exact
            path="/"
            render={() => <Redirect to="/hsl/10/90/50" />}
          />

          <ul style={styles.nav}>
            <NavLink to="/hsl/10/90/50">Red</NavLink>
            <NavLink to="/hsl/120/100/40">Green</NavLink>
            <NavLink to="/rgb/33/150/243">Blue</NavLink>
            <NavLink to="/rgb/240/98/146">Pink</NavLink>
          </ul>

          <div style={styles.content}>
            <TransitionGroup>
              {/* no different than other usage of
                CSSTransition, just make sure to pass
                `location` to `Switch` so it can match
                the old location as it animates out
            */}
              <CSSTransition key={location.key} classNames="fade" timeout={300}>
                <Switch location={location}>
                  <Route exact path="/hsl/:h/:s/:l" component={HSL} />
                  <Route exact path="/rgb/:r/:g/:b" component={RGB} />
                  {/* Without this `Route`, we would get errors during
                    the initial transition from `/` to `/hsl/10/90/50`
                */}
                  <Route render={() => <div>Not Found</div>} />
                </Switch>
              </CSSTransition>
            </TransitionGroup>
          </div>
        </div>
      )}
    />
  </Router>
);

const NavLink = props => (
  <li style={styles.navItem}>
    <Link {...props} style={{ color: "inherit" }} />
  </li>
);

const HSL = ({ match: { params } }) => (
  <div
    style={{
      ...styles.fill,
      ...styles.hsl,
      background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`
    }}
  >
    hsl({params.h}, {params.s}%, {params.l}%)
  </div>
);

const RGB = ({ match: { params } }) => (
  <div
    style={{
      ...styles.fill,
      ...styles.rgb,
      background: `rgb(${params.r}, ${params.g}, ${params.b})`
    }}
  >
    rgb({params.r}, {params.g}, {params.b})
  </div>
);

用户可以单击导航以在组件之间导航：

<ul style={styles.nav}>
       <NavLink to="/hsl/10/90/50">Red</NavLink>
       <NavLink to="/hsl/120/100/40">Green</NavLink>
       <NavLink to="/rgb/33/150/243">Blue</NavLink>
       <NavLink to="/rgb/240/98/146">Pink</NavLink>
</ul>

我不明白的是以下内容：

<TransitionGroup>
  {/* no different than other usage of
    CSSTransition, just make sure to pass
    `location` to `Switch` so it can match
    the old location as it animates out
*/}
  <CSSTransition key={location.key} classNames="fade" timeout={300}>
    <Switch location={location}>
      <Route exact path="/hsl/:h/:s/:l" component={HSL} />
      <Route exact path="/rgb/:r/:g/:b" component={RGB} />
      <Route render={() => <div>Not Found</div>} />
    </Switch>
  </CSSTransition>
</TransitionGroup>

这些路线如何动态编码，冒号之间？像这样：/hsl/:h/:s/:l这到底是做什么的？这有效吗？

Answer 1

您必须了解哪些参数和查询。

查询

包含查询字符串的典型URL如下：

http://example.com/over/there?name=ferret

当服务器收到对此类页面的请求时，它可能会运行   程序，传递查询字符串，在本例中为name = ferret   没有改变，对程序。问号用作分隔符，   并且不是查询字符串的一部分。

Web框架可以提供解析多个参数的方法   查询字符串，由一些分隔符分隔。在示例URL中   在下面，多个查询参数由＆符号'＆amp;'分隔：

http://example.com/path/to/page?name=ferret&color=purple

这些是附加到URL末尾的值，以便传递有关网址条件的其他信息。

参数

URL参数是其值在a中动态设置的参数页面的URL，可以通过其模板及其数据源进行访问。这使得页面非常动态，使单个页面能够供电无穷无尽的观点。

一个例子就像你在问题中提到的那样。

如果<Route exact path="/rgb/:r/:g/:b" component={RGB} /> React路由器查找/rgb/的完全匹配，其中有三个由斜杠分隔的附加值，并且这些值可以从路由器以this.props.match.params.[r or g or b]访问，所以基本上冒号告诉路由器它是一个参数，它是变量，它后面的东西被用作检索这些变量的密钥。

动态路线的构建如何起作用？

1 个答案: