问题标签 [react-router-component]

我有一个大型应用程序，我很快就会切换到 react-router 1.x。

该应用程序具有大型嵌套导航结构。

ETC..

在 /page1 我的子导航将是：

选项1 | 选项2 | 选项 3 | 选项 4

在 /page/option4

选项1 | 选项2 | 选项 3

我一直在寻找一种方法来为路由配置中的子导航组件供电，因此只需要在一个地方定义页面，但到目前为止还没有找到示例。这种问题的正常方法是什么，这样的例子是否存在？

更新

因此，从概念上讲，我正在按照 .net 站点地图提供程序的思路进行思考，其中导航、面包屑路径和路由将根据页面的分层定义进行工作。我想知道反应路由器的路由定义是否可以是源，或者可以从不同的源驱动，以及通常如何实现。

问题：

此动态路由器有效，除非存在涉及参数的动态链接。

具体来说：

我可以硬编码链接或在浏览器中输入：

并带有代码：

控制台显示：

但是，使用动态链接...

产生：

浏览器显示

片刻，然后将自身重置为（页面不重新加载）

控制台显示：

我根据乔丹在下面的建议重写了这个问题。
我希望它不会太长。我使用 alt Flux 作为我的商店

路线.js：

如果它在 routes.js 文件中，那么这部分可能需要做一些事情：

导航项.json：

我无法解决这个问题，我无法呈现component我调用nested path的HTML/page/detail

我的路由树

我的 {App} 组件呈现这个：

我的路由/page/detail是从Link组件内部调用的，{Page}但如果我访问此链接，我只会看到 {Page} 组件呈现的内容。我已经搜索了一些关于使用 react-routers 的嵌套路由的解决方案，但我没有找到答案。

更新：

通过这个解决方案，我已经渲染了我的 {Detail} 组件的 html：我已经在 {Page} 组件中插入了它

更新 2

在我的 {Page} 组件中，我插入了一个 jQuery插件。

此插件仅适用于 {Page} 刷新页面，如果我导航到 /page/detail 然后返回 /page 插件不起作用。

我正在显示存储在数据库中的文本。数据来自 firebase 作为字符串（包括换行符）。为了使其显示为 HTML，我最初执行了以下操作：

这很好用。但是，还有一个附加功能。用户可以键入[word]，该单词将成为链接。为了实现这一点，我创建了以下函数：

我省略了该this.permalink方法，因为它不相关。如您所见，我正在尝试返回<Link>从 react-router 导入的组件。但是，由于它是原始 HTML，dangerouslySetInnerHTML因此不再正常工作。

所以我有点卡在这一点上。我可以做些什么来格式化内部文本并创建链接？

我的路由器如下所示，

我的菜单组件示例代码看起来像

问题是当我单击“我的仪表板”时，它会路由到

如果我再次单击“我的仪表板”，它将从这里路由到

并继续前进。

如何解决这个问题？我在哪里做错了？或者我必须在配置中做更多的事情？

I am trying to write tests for my React component. I am getting this error:

TypeError: Cannot read property 'pushState' of undefined

My code looks like this:

My test looks like this:

Looks like this.context.history.pushState(null, '/import_result'); line is breaking. this.context.history is undefined only when I am running tests, but it is perfectly fine when I am running code. Should I mock this.context? If so how can I mock it?

I'm new to React and I would like to develop a Single Page Application, so I'm using react-router four routing.

Below the main.js, where I specify the routes

And then the App.js, as you can see I want to have a fixed Header and Footer, and then to have the content of the page change dinamically depending on the route.

With this code, once the application is loaded with the path ("/"), I need to click on the link Home to display the home content, but I would like to be displayed by default, once the application is first loaded.

How can I achieve that?

Thank you!!

我正在修补react-router，试图实现简单的路由。我按照他们的示例（但没有imports）https://github.com/rackt/react-router#whats-it-look-like输入我的代码。

我在浏览器中收到此错误：

未捕获的错误：不变违规：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

这就是我所做的。

我在页面上附加脚本，ReactRouter.min.js我的代码在react-routes.js. 还有reactandreact-dom和 jquery （所有三个 in app.js）：

这是我的react-router.js，尚未编译：

这是我react-router.js用 Babel 编译后的结果。我在页面上附上了这个：

babel --presets react -o public/js/react-routes.js assets/js/react-routes.js：

我做错了什么？为什么会抛出错误？Router 是一个对象，而不是 React 组件。为什么？我查看此示例并以相同的方式键入我的代码https://github.com/rackt/react-router#whats-it-look-like

我想在 react-router-component 中使用基于哈希的路由，所以我将hash属性添加到<Locations>组件中，如下所示：

我链接到这样的位置：

我还尝试在组件中手动包含主题标签Link（我找不到它记录了如何链接到基于哈希的路由）。

问题是，无论哪种方式，react-router-component 都没有响应点击链接。它正在更新浏览器中的 url，但它没有切换以呈现在 Location 中定义为处理程序的组件。

当我手动访问 url 时，例如http://localhost:8082/#/movies/，正在呈现正确的组件，但同样，我仍然无法导航。

此外，如果我hash从 中删除该属性，则<Locations>链接到路由将再次按预期工作。

I have been trying to solve a problem I've facing the last few days with routing a deep nested component. I am using reactjs v14.6 and react-router v2.0 with browserHistory. If I swap it out for hashHistory and use the deprecated history mixin it works as expected.

I have successfully rendered and able to route from default home page to profile page using react-router. I have a child component called searchGithub as my nav bar that is rendered on both home and profile components. Its a basic search that takes a query param profile/:username which successfully routes to the profile component/page. I followed the documents on swapping out the history mixing for higher order functions

Its when I try and use my search component on the profile page that I am experiencing problems. Its adding an additional /profile in the url. for example from the home page it will be properly route http://localhost:3000/profile/tyler but if I am on the profile page and try and search a username the url instead becomes http://localhost:3000/profile/profile/tyler causing an error Warning: [react-router] Location "/profile/profile/tyler" did not match any routes

here is my link to github repo to see full project

I don't think the problem lies in my browserHistory or on my server.js file rather a problem in either my routes file or in one of my components. Feel free to check out my link above to pull the full project and install dependencies if needed. I think it has to do with not passing in a location descriptor which I am not sure is the third argument that is needed to be passed too this.context.router.push()

here is my /App.jsx component

here is my /routes.jsx

here is my /SearchGithub.jsx

here is my /main.jsx

I have a feeling it has to do with router.push({ pathname, query, state }) // new "location descriptor", hoping someone can help as I been pulling my hair out trying to figure out what I am doing wrong. I am also curious how I would implement location descriptor if that is in fact what is causing my problem