问题标签 [react-routing]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
740 浏览

node.js - react-routing 中的两条通配符路由是什么意思?

我试图理解kirasoft的 react-starter-kit并注意到他们的路由有两个用于“*”通配符路由的条目。为什么有两个,优先顺序是什么?第一条路线似乎设置了整个应用程序,然后第二条路线似乎触发了默认的内容处理程序......都被触发了,如果是这样,两者之间的逻辑是什么,它们是否都只是按顺序触发并被附加以某种方式一起响应?

0 投票
1 回答
1207 浏览

javascript - 使用 React-router 在路由之间切换

我目前正在使用 react js 和 react router 构建我的第一个 webapp,因为我想开发一个单页应用程序。我只是用反应路由器做第一个例子,并试图在两条路由之间切换,但是我无法让它工作。目标是拥有一个非常简单的带有链接列表的 html 页面,并在视图之间切换。

呈现 index.html 时,我看到了链接列表,但是当我单击链接时,我看到 url 路径发生了变化,但是页面的内容没有改变,react-router js 不应该处理吗?我错过了什么?

代码下方:

我的 index.html:

我的 main.js 文件:

我的 app.js:

还有我的 about.js

0 投票
1 回答
56 浏览

reactjs - 反应嵌套路由问题

我的路由器如下所示,

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

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

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

并继续前进。

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

0 投票
3 回答
2381 浏览

javascript - How to display a Route by default with React-Router

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

0 投票
5 回答
773 浏览

javascript - 使用 React v0.14.3 的 React 路由器

我正在使用 React 和 Material-UI 创建一个应用程序,我也包含了 React-router。但是当我运行我的应用程序时出现以下错误(Uncaught TypeError: (0 , _reactDom.ReactDOM) is not a function )。

我正在使用 React v0.14.3 和 React-Router v1.0.2

BodyComponent 我写在一个不同的文件中,我将它导入到我的 main.js

我试过 ReactDOM.render 但我得到以下错误

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

我已经创建了相同的小提琴:

https://jsfiddle.net/69z2wepo/23814/

下面是我的代码:(更新代码)

主.js

下面是我的 package.json 依赖项

0 投票
1 回答
6528 浏览

reactjs - 未捕获的错误:不变违规:元素类型无效:对象

我正在修补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

0 投票
4 回答
20398 浏览

reactjs - 使用反应路由器当前路由有条件地在菜单上设置活动类

我正在使用反应路由器 1.0.2,我的路线如下所示:

我的 App 组件看起来像这样,我想我可以在道具中传递位置:

我想有条件地在 Menu 组件上设置一个活动类:

但是this.props.location当菜单的渲染函数被调用时是 null 吗?

如何将道具传递给子组件?

0 投票
1 回答
289 浏览

reactjs - 点击后反应路由器没有获得路由

routes.js是这样的:

我在组件中有一个头文件App,我的头文件如下所示:

当我运行localhost:3333它时,它会转到App包含HeaderOne的页面Two。但是当我点击它时,它不显示Oneand的内容或组件Two

我在路由器中缺少什么?

需要帮忙。

0 投票
1 回答
660 浏览

reactjs - react-router v2.0 deep nested component passing in additional unexpected url

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

0 投票
2 回答
1530 浏览

react-router - 路由不适用于 react-router-redux 操作

使用 Link 时,路由器按预期工作,但我收到警告 [history] ​​pushState is deprecated;改用推。

使用 react-router-redux 中的 routeActions 不起作用,url 已更改(http://localhost:3002/addCity),但如果我通过 url 转到页面,则查看仍然相同(主页)或显示错误:localhost :3002/添加城市。

混帐:https ://github.com/kirsanv43/Weather.git

减速机:

存储配置:https ://github.com/kirsanv43/Weather/blob/master/app/redux/config/store.js

路由器:

零件: