Reactjs 动态路线的构建在react中是如何工作的？

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

从“React”导入React；
从“反应转换组”导入{TransitionGroup，cstranslation}；
进口{
BrowserRouter作为路由器，
转换
路线
链接
重新使用
}从“反应路由器dom”；
/*你会在某个地方需要这个CSS
.淡入{
不透明度：0；
z指数：1；
}
.fade-enter.fade-enter-active{
不透明度：1；
过渡：不透明度250ms；
}
*/
常量AnimationExample=（）=>(
(
}
/>

红色
绿色
蓝色
粉红色

{/*与的其他用法没有区别
CSTRANSION，一定要通过
`位置`to`Switch`以便匹配
设置动画时的旧位置
*/}
{/*如果没有这个'Route'，我们将在
从`/`到`/hsl/10/90/50的初始转换`
*/}
未找到}/>
)}
/>
);
const NavLink=props=>(


);
常量HSL=（{match:{params}}）=>(
hsl（{params.h}，{params.s}%，{params.l}%）
);
常量RGB=（{match:{params}}）=>(
rgb（{params.r}，{params.g}，{params.b}）
);

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

<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>

{/*与的其他用法没有区别
CSTRANSION，一定要通过
`位置`to`Switch`以便匹配
设置动画时的旧位置
*/}
未找到}/>

---

这些路由是如何动态编码的，它们之间有冒号？像这样：

/hsl/:h/:s/:l

这到底在干什么？这是如何有效的？

您必须了解什么是参数和查询

询问

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

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

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

这些是附加到URL末尾的值，用于传递有关URL条件的附加信息

参数

URL参数是其值在URL中动态设置的参数 页面的URL，并且可以通过其模板和数据源访问。 这使页面具有难以置信的动态性，使单个页面能够启动 无数的观点

一个例子就是你在问题中提到的

在

React的情况下，路由器会查找

/rgb/

的精确匹配，该匹配有三个由斜杠分隔的附加值，这些值可以通过

this.props.match.params从路由器访问。[r或g或b]

因此，基本上冒号告诉路由器它是一个参数，它是一个变量，它之后的内容被用作检索这些变量的键

<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>