问题标签 [react-router-dom]

我正在尝试捆绑路由，然后在它们在 reacttraining（https://reacttraining.com/react-router/web/guides/code-splitting）加载示例时渲染它们，但是我在使用 Bundle 的渲染方法时遇到错误零件。我还尝试按原样制作一个组件而不进行捆绑，以防它可能尚未加载但没有工作。任何帮助表示赞赏。

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: null. Check the render method of 'Bundle'.

Uncaught (in promise) TypeError: Cannot read property '_currentElement' of null

我的捆绑组件：

我的带有路由的根组件：

我的 app.js：

所以，我目前使用react-router的 v2 如下：

应用程序.js

主.js

如何将当前的 v2 路由器转换为 v4？我不清楚的是父嵌套元素：

到目前为止，在我看到的所有 v2 -> v4 转换示例中，没有一个清楚地解释子元素发生了什么。我是否希望将子元素放置在 App.js 组件本身中，如果是这样，在我的 App.js 版本中，作为 Main.js 实际发生的任何导航的第一个迹象，这将如何工作？

我正在使用带有此配置的 react-router-dom (4.1.1)：

我希望这个网址“localhost:3000/section/news/title.ghtml”在第二个条件下匹配，但我得到了这个：

当我删除.ghtml时，它工作正常。

这是反应路由器可以理解.ghtml的一种方式吗？

我是 React 新手，目前正在开发导航栏。我有 index.js 这是我的启动文件

路由是从如下所示的 routes/index.js 文件中导入的

我的主要问题是，当我使用 chrome 和 React Developer 工具时，我可以看到与 BrowserRouter 对象相关的路由，如下所示 浏览器元素检查中的路由

但是我无法打开任何指定的路由，总是得到“无法获取 /profile”，请注意我使用 webpack 作为 web 开发包。

这是我对 gulp 的第一次体验。我尝试react-route-dom在我的index.jsx. 但是当我尝试导入它时，我遇到了这个错误消息：

'react-router-dom' 由 projectMyAccount.Site\project.MyAccount.Site.Desktop\scripts\js\desktop\bundle\app.js 导入，但无法解析 - 将其视为外部依赖项 未提供名称对于 options.globals 中的外部模块“react-router-dom”——猜测“reactRouterDom”

索引 Jsx：

主要的吞咽任务：

怎么了？我是否必须为 gulp 导入另一个包？我不清楚。我可以将它与 unpkg 包一起使用，如下所示：

但我认为长期不利于发展。如何从节点模块实现它？

我试图让我的 Header 组件在 Route 更改时呈现。我尝试在 Switch 上使用 onChange 和 onValueChange ，但都没有被调用。有没有办法在路由改变时调用函数？

这是我的根组件中的代码：

这是我的页脚组件中使用 FilterLink 组件的代码

现在这是我的 FilterLink 中的代码，它使用来自“react-router-dom”的链接不起作用

我找不到该错误，因为它没有引发任何错误，只是在我应用此使用 Link 的代码后导致我的应用程序不呈现任何内容。帮助？

我想在我的路由上传递一个可选参数，这是我的代码在根组件中不起作用，过滤器是可选的，我试过 /(:filter) 它不起作用：

此代码位于我的页脚组件上，该组件使用仅使用 NavLink 的 FilterLink：

它正在工作，但样式仅影响根组件或 localhost:3000/ （根）

I have this code:

the filter param or '' on the root is suppose to be on App components' props base on the previous react router versions?

This is my code on my App:

I logged this.props.match.params on console but it has none? help?

我的反应应用程序在 localhost 上运行良好，但是当我将它部署到 gh-pages 或浪涌后，它不会让我使用 URL 在页面之间移动。

• 这是项目回购链接
• 演示网址在这里

用户可以通过点击右上角的 menuItem 进入注册页面。但是如果用户使用http://chat.susi.ai/signup/ URL，它会给出 404 页面

我尝试了几种来自互联网的解决方案，但没有奏效。

下一个问题是：我创建了一个 404 页面，以便在用户尝试移动到损坏的链接时显示出来。它在 localhost 中运行良好。但不在生产中。我尝试了这个解决方案，但没有任何改变。

这是我的 index.js 文件的一部分

如果有人可以用示例代码为我的问题提出好的解决方案，这对我真的很有帮助。