Questions tagged «react-router»

我正在尝试React-Router（v4），但从Nav开始让Linkbe之一出现问题active。如果我单击任何Link标签，则活动的东西开始工作。但是，我希望HomeLink能够在应用启动后立即启动，因为那是在/路线上加载的组件。有什么办法吗？ 这是我当前的代码： const Router = () => ( <BrowserRouter> <div> <Nav> <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */} <Link activeClassName='is-active' to='/about'>About</Link> </Nav> <Match pattern='/' exactly component={Home} /> <Match pattern='/about' exactly component={About} /> <Miss component={NoMatch} /> </div> </BrowserRouter> )

85 javascript  reactjs  ecmascript-6  react-router 

我在使用React Router时遇到了一些麻烦（我使用的是version ^ 4.0.0）。 这是我的index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); App.js就是任何东西。我在这里发布基本的，因为这不是问题（我相信） import React, { Component } from 'react'; import logo from …

85 javascript  json  reactjs  react-router 

有没有办法让React Router在新标签页中打开链接？我尝试了一下，但没有成功。 <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> 可以通过向onClick="foo"Link添加类似于我上面的内容来使其模糊，但是会出现控制台错误。 谢谢。

85 reactjs  react-router 

我有一个如下的路由器： <Router history={hashHistory}> <Route path="/" component={App}> <IndexRoute component={Index}/> <Route path="login" component={Login}/> </Route> </Router> 这是我要实现的目标： 将用户重定向到（/login如果未登录） 如果用户/login在已经登录时尝试访问，请将其重定向到root/ 所以现在我想以检查用户的状态App的componentDidMount，然后做一些事情，如： if (!user.isLoggedIn) { this.context.router.push('login') } else if(currentRoute == 'login') { this.context.router.push('/') } 这里的问题是我找不到获取当前路由的API。 我发现建议使用Router.ActiveState mixin和路由处理程序来解决此已关闭的问题，但是现在似乎已弃用了这两个解决方案。

83 javascript  reactjs  react-router 

我正在使用reactjs路由器中的Link组件，但无法使onClickevent运行。这是代码： <Link to={this.props.myroute} onClick='hello()'>Here</Link> 这是做这件事的方式还是另一种方式？

82 reactjs  react-router  react-redux 

我正在尝试在我的React网站上设置Google Analytics（分析），并且遇到了一些程序包，但其中没有一个程序包具有与示例相同的设置。希望有人能对此有所启发。 我正在查看的软件包是react-ga。 我的渲染方法index.js如下所示。 React.render(( <Router history={createBrowserHistory()}> <Route path="/" component={App}> <IndexRoute component={Home} onLeave={closeHeader}/> <Route path="/about" component={About} onLeave={closeHeader}/> <Route path="/gallery" component={Gallery} onLeave={closeHeader}/> <Route path="/contact-us" component={Contact} onLeave={closeHeader}> <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/> </Route> <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} /> <Route path="/feedback" component={Feedback} onLeave={closeHeader} /> </Route> <Route path="*" component={NoMatch} onLeave={closeHeader}/> </Router>), document.getElementById('root'));

82 google-analytics  reactjs  react-router 

看一下这个React Router Dom v4示例https://reacttraining.com/react-router/web/example/auth-workflow我看到PrivateRoute组件像这样破坏了一个休息道具 const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } }}/> ) )}/> ) 我想确定这{ component: Component, ...rest }意味着： 从中props获取Component属性，然后再提供所有其他属性，然后重命名props为，rest这样您就可以避免传递给Routerender函数的属性的命名问题 我对吗？

82 reactjs  react-router 

有谁知道如何在react-router中限制对特定路由的访问？我想在允许访问特定路由之前检查用户是否已登录。我以为这很简单，但是文档尚不清楚该怎么做。 这是我应该在定义<Route>组件的位置设置的东西，还是应该在组件处理程序中处理的东西？ <Route handler={App} path="/"> <NotFoundRoute handler={NotFound} name="not-found"/> <DefaultRoute handler={Login} name="login"/> <Route handler={Todos} name="todos"/> {/* I want this to be restricted */} </Route>

81 javascript  reactjs  react-router 

我在更改视图以响应路由时遇到麻烦。我只想显示一个用户列表，单击每个用户应导航到详细信息页面。这是路由器： import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter } from 'react-router-dom'; import Users from "./components/Users"; import { Router, Route } from "react-router"; import Details from "./components/Details"; ReactDOM.render(( <BrowserRouter> <div> <Route path="/" component={Users} /> <Route path="/details" component={Details} /> </div> </BrowserRouter> ), document.getElementById('app')) 当我使用url / details时，我的浏览器会导航到该url，但不会更改视图。任何其他路由都会抛出404，因此似乎可以识别该路由，但无法更新。

81 reactjs  react-router 

据我了解，<Route path="/" component={App} />会提供App与路由相关的道具，例如location和params。如果我的App组件有许多嵌套的子组件，那么我如何在不使用以下子项的情况下让子组件访问这些道具： 从App传递道具 使用窗口对象 为嵌套的子组件创建路线 我以为this.context.router会有一些与路线有关的信息，但this.context.router似乎只有一些功能可以操纵路线。

80 javascript  reactjs  react-router 

在我的React容器/组件中，我可以使用哪种类型来引用matchReact Router DOM包含的部分？ interface Props { match: any // <= What could I use here instead of any? } export class ProductContainer extends React.Component<Props> { // ... }

78 reactjs  typescript  react-router 

我正在尝试在示例应用程序中设置react-router，但出现以下错误： You should not use <Link> outside a <Router> 我的应用程序设置如下： 父组件 const router = ( <div className="sans-serif"> <Router histpry={browserHistory}> <Route path="/" component={Main}> <IndexRoute component={PhotoGrid}></IndexRoute> <Route path="/view/:postId" component={Single}></Route> </Route> </Router> </div> ); render(<Main />, document.getElementById('root')); 子/Main组件 export default () => ( <div> <h1> <Link to="/">Redux example</Link> </h1> </div> ) 知道我在做什么错吗？ 这是一个沙盒链接来演示该问题。

77 reactjs  react-router  jsx 

我有一个带有搜索面板的网页。搜索面板有几个输入字段：id，size，... 我想要的是用户设置搜索值（例如：id = 123和size = 45）并按下搜索按钮时： Redux reducer中的searchState应该使用新的搜索值（id = 123和size = 45）进行更新 网址应更改为“ http：// mydomain / home？id = 123＆size = 45 ” 另一方面，如果用户将URL更改为http：// mydomain / home？id = 111＆size = 22，则： reducer中的searchState应该使用新的搜索值（id = 111和size = 22）进行更改 UI搜索面板输入应更新为新值（id = 111和size = 22） 如何达成目标？我应该使用什么路由器（react-router，redux-router，react-router-redux或其他）？

77 react-router  redux  react-redux  redux-framework  react-router-redux 

我们提供了讲座和章节的列表，用户可以在其中选择和取消选择它们。这两个列表存储在redux存储中。现在，我们希望在url的hash标签中保留选定的演讲段和章节段的表示形式，并且对该URL所做的任何更改也应更改存储（双向同步）。 使用react-router甚至react-router-redux的最佳解决方案是什么？ 我们真的找不到一些很好的示例，其中react路由器仅用于维护url的hash标签，并且仅更新一个组件。

76 javascript  reactjs  react-router  redux  react-router-redux 

这是常见的目的，将不匹配的请求定向到未找到的页面。 使用react-router v4进行此操作看起来像以前的版本，我希望此示例在下面工作。链接可以正常工作，但我希望请求的NotFound组件仅请求未知的url；但它总是在那里。 import { BrowserRouter as Router, Route, Link } from 'react-router-dom' class Layout extends Component { render() { return ( <Router> <div className="App"> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/user">User</Link></li> </ul> <Route exact path="/" component={Home}/> <Route path="/user" component={User}/> <Route path="*" component={Notfound}/> </div> </Router> ); } } 它既然path="*"代表了所有请求和notfound组件，总是存在在那里，但是我怎么能说为有效的URL路径隐藏这个组件呢？

76 reactjs  react-router