Tag: react router
react-router回到页面如何configuration历史logging？
任何人都可以告诉我如何可以回到前一页，而不是一个特定的路线？ 当使用这个代码时： var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); 得到这个错误， goBack（）被忽略，因为没有路由器的历史logging 这是我的路线： // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> <DefaultRoute name="home" handler={HomePage} /> <Route name="add-school" […]
如何获取新数据以响应React路由器使用Redux进行更改？
我正在使用Redux，redux-router和reactjs。 我试图做一个应用程序，我获取路线变化的信息，所以，我有这样的： <Route path="/" component={App}> <Route path="artist" component={ArtistApp} /> <Route path="artist/:artistId" component={ArtistApp} /> </Route> 当有人进入artist/<artistId>我想search艺术家，然后呈现信息。 问题是，这样做的最好方法是什么？ 我已经find了一些答案，使用RxJS或尝试一个中间件来pipe理请求。 现在，我的问题是，这是真正必要还是只是一种方法来保持体系结构的反应不可知论？ 我可以直接从反应componentDidMount（）和componentDidUpdate（）获取我需要的信息吗？ 现在我正在通过触发这些函数中的请求信息的操作来执行此操作，并且在信息到达时重新呈现组件。 该组件有一些让我知道的属性： { isFetching: true, entity : {} } 谢谢！
React路由器v4中的嵌套路由
我试图设置一些嵌套的路线来添加一个共同的布局。 检查代码： <Router> <Route component={Layout}> <div> <Route path='/abc' component={ABC} /> <Route path='/xyz' component={XYZ} /> </div> </Route> </Router> 虽然这工作得很好，我仍然得到警告： 警告：你不应该在同一条path上使用<Route component>和<Route children> 将被忽略
使用react-routerlogin后自动redirect
我想在我的react / react-router / flux应用程序中构build一个Facebooklogin。 我有一个在login事件中注册的监听器，并且想要将用户redirect到“/仪表板”，如果他们已经login。我该怎么做？ Location.push不能很好地工作，除非完全重新加载页面。
Navitem中的React-Bootstrap链接项
我有一些使用react-router和react-bootstrap的样式问题。 下面是代码片段 import { Route, RouteHandler, Link } from 'react-router'; import AuthService from '../services/AuthService' import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; <Nav pullRight> <NavItem eventKey={1}> <Link to="home">Home</Link> </NavItem> <NavItem eventKey={2}> <Link to="book">Book Inv</Link> </NavItem> <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown"> <MenuItem eventKey="3.1"> <a href="" onClick={this.logout}>Logout</a> </MenuItem> </NavDropdown> </Nav> 这是呈现时的样子。 我知道<Link></Link>是造成这个，但我不知道为什么？ 我想这是在线。
通过链接反应路由器中的道具
我正在使用react-router。 我试图通过属性的反应路由器的“链接” var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" }}>Create Idea</Link> <RouteHandler/> </div> ); } }); var routes = ( […]
React-Router – 未捕获TypeError：无法读取未定义的属性'getCurrentLocation'
我正在使用最新版本的react-router （版本^ 3.0.0）。 我使用ES5编写了以下路由： routes.js ： var React = require("react"); var Router = require("react-router"); var AuthorPage = require('./components/authors/authorPage') var App = require('./components/app') var Route = Router.Route; var routes = ( <Route path="/" component={App}> <Route path="authors" component={AuthorPage}/> </Route> ); module.exports = routes; 在另一个名为main.js JS文件中，我执行以下调用： main.js ： var React= require("react"); var ReactDom = require("react-dom"); var Router = […]
React路由器授权
在元件安装之前进行授权检查的最佳做法是什么？ 我使用react-router 1.x 这是我的路线 React.render(( <Router history={History.createHistory()}> <Route path="/" component={Dashboard}></Route> <Route path="/login" component={LoginForm}></Route> </Router> ), document.body); 这是我的仪表板组件： var Dashboard = React.createClass({ componentWillMount: function () { // I want to check authorization here // If the user is not authorized they should be redirected to the login page. // What is the right way to perform […]
HtmlWebpackPlugin注入加载非根网站path时破坏的相对path文件
我正在使用webpack和HtmlWebpackPlugin注入捆绑js和css到一个html模板文件。 new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), 它会生成下面的html文件。 <!doctype html> <html lang="en"> <head> … <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> 当访问应用程序localhost:3000/的根目录时可以正常工作，但在尝试从另一个URL访问应用程序时失败，例如localhost:3000/items/1因为捆绑文件没有注入绝对path。 当html文件被加载时，它将在不存在/items目录内查找js文件，因为react-router尚未加载。 我怎样才能得到HtmlWebpackPlugin注入文件的绝对path，所以expression会寻找他们在我的/dist目录的根，而不是在/dist/items/main-…min.js ？ 或者，也许我可以改变我的快递服务器来解决这个问题？ app.use(express.static(__dirname + '/../dist')); app.get('*', function response(req, res) { res.sendFile(path.join(__dirname, '../dist/index.html')); }); 基本上，我只需要得到这一行： <script src="main…js"></script> 在源头开始时有一个斜线。 <script src="/main…js></script>
响应在React路由器中的路由转换来触发Redux操作
我在我最新的应用程序中使用react-router和redux，我正在面对一些与根据当前的url参数和查询所需的状态更改相关的问题。 基本上我有一个组件需要更新它的状态，每次URL的变化。 国家正在通过像装饰这样的装饰者通过道具传入 @connect(state => ({ campaigngroups: state.jobresults.campaigngroups, error: state.jobresults.error, loading: state.jobresults.loading })) 目前，我正在使用componentWillReceiveProps生命周期方法来响应来自react-router的url更改，因为react-router会在URL中的this.props.params和this.props.query发生更改时将新的props传递给处理程序。这个方法的主要问题是我在这个方法中触发一个动作来更新状态 – 然后传递新的道具组件，这将再次触发相同的生命周期方法 – 所以基本上创build一个无限循环，目前我正在设置一个状态variables来阻止这种情况的发生。 componentWillReceiveProps(nextProps) { if (this.state.shouldupdate) { let { slug } = nextProps.params; let { citizenships, discipline, workright, location } = nextProps.query; const params = { slug, discipline, workright, location }; let filters = this._getFilters(params); // set the state […]
