问题标签 [react-router-v4]

我想声明一个带有可选路径参数的路径，因此当我添加它时，页面会做一些额外的事情（例如填充一些数据）：

http://localhost/app/path/to/page <= 渲染页面 http://localhost/app/path/to/page/pathParam <= 根据 pathParam 用一些数据渲染页面

在我的反应路由器中，我有以下路径，以支持这两个选项（这是一个简化的示例）：

我的问题是，我们可以在一条路线上声明它吗？如果我只添加第二行，则找不到没有参数的路由。

编辑＃1：

这里提到的关于以下语法的解决方案对我不起作用，它是正确的吗？它是否存在于文档中？

我的反应路由器版本是：1.0.3

我有以下代码：

但是 ESLint 由于 , 引发了以下警告=>，这是（AFAIK）一种不好的做法，因为它render在每次调用时都会创建函数的新引用，而我不希望这样。

警告 JSX 道具不应该使用箭头函数 react/jsx-no-bind

因此，我正在尝试使用专用但简单的组件来重构它，例如：

但是，我很难弄清楚如何使用它。

首先，我认为我需要使用component而不是render属性，但我不太确定，到目前为止我还没有找到关于它的正确文档。（编辑：https ://react-router.now.sh/Match 这是 v4 的文档）

我尝试了几件事，包括以下内容，但它不起作用。

我找到了一些示例，但它们都在 using React.createClass，我宁愿不使用它，因为 usingconst似乎是为无状态组件做事的新“最佳”方式。

一种可能的解决方案是使用扩展 React.Component 的类。但是感觉不对。（并且 ESLint 显示错误）

组件应该写成纯函数 react/prefer-stateless-function

来自有关该render方法的文档：（https://react-router.now.sh/Match）

您可以传入一个在位置匹配时调用的函数，而不是为您呈现组件。将使用传递给组件的相同道具调用您的渲染函数。 这允许方便的内联匹配渲染和包装。

也许方便，但不被认为是一个好的做法。

有没有办法使用纯函数来代替？

我使用 react-router v3 进行了以下路由配置：

我使用 v4 尝试了以下操作：

和内部Admin组件：

问题：

1. 当我访问时/login，Admin组件也匹配。
2. 我尝试更改为<Match pattern="/" exactly component={Admin} />. 它不会呈现Admin组件中的子匹配项。所以当我访问时/profile，它没有匹配。

我目前正在努力使用反应路由器 v4 嵌套路由。

最接近的示例是 React-Router v4 文档中的路由配置。

我想将我的应用分成 2 个不同的部分。

一个前端和一个管理区域。

我在想这样的事情：

前端的布局和样式与管理区域不同。所以在首页的路线首页，关于等应该是子路线。

/home应该呈现在 Frontpage 组件中，而/admin/home应该呈现在 Backend 组件中。

我尝试了一些变化，但我总是以没有点击 /home 或 /admin/home 结束。

编辑 - 19.04.2017

因为这篇文章现在有很多观点，所以我用最终的解决方案对其进行了更新。我希望它可以帮助某人。

编辑 - 08.05.2017

删除了旧的解决方案

最终解决方案：

这是我现在使用的最终解决方案。这个例子还有一个像传统 404 页面一样的全局错误组件。

新的 react-router 语法使用Link组件来移动路由。但这怎么能与material-ui?

就我而言，我使用标签作为主要导航系统，所以理论上我应该有这样的东西：

但是在渲染的时候，material-ui 会抛出一个错误，那就是它的子元素Tabs必须是一个Tab组件。有什么方法可以继续？如何管理isActive选项卡的道具？

提前致谢

我location.key在我的子组件中使用。

默认情况下，密钥长度为 6 个字符。例如，它看起来像这样：

然而location，孩子们收到的财产<Match>是这样的：

在这个location对象中，我们看到state但它为空，我预计它是key. 有谁知道react router v4是否计划得到这个？或者是否有办法在道具中获得它？我当然知道我可以通过去获得这把钥匙，const history = createBrowserHistory(); let cur_key = history.location.key但这可能与道具不匹配（由于动画时间等），这就是为什么我希望从道具中得到它。

https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-2/react-router.min.js我怎样才能从 using转向using https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.1/ReactRouter.min.js？

下面使用 3.x 的示例。

HTML

JS

请参阅：https ://jsfiddle.net/developit/nvpr63eg/

如果我移动到任何托管的 CDN 4.x 版本，尽管它不起作用（返回语句后无法访问代码）。

我有几个按钮用作路线。每次更改路线时，我都想确保处于活动状态的按钮发生更改。

有没有办法在反应路由器 v4 中监听路由变化？

我正在使用 webpack@2 和 React-Router@4 构建一个 React 应用程序。在开发模式下一切正常，但对于生产我想使用服务器端渲染，它会导致我出现错误：

这是我的应用程序组件：

这是 webpack 的入口点：

最后是 webpack 的配置：

有任何想法吗？

我更喜欢ReactCSSTransitionGroup. react-motion下面的代码导致组件在路由更改时淡入（出现），但问题是 - 离开的组件不会淡出，它会立即离开。