我有一个看起来像这样的路线配置(只显示我认为可能相关的部分):
var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, NotFoundRoute } = Router;
var routes = (
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name='home' path='/home' handler={HomeHandler}/>
<Route name='settings' path='/settings/?:tab?' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.getElementById('application'));
});
现在,在我的Settings react文件中,我有以下内容:
var Settings = React.createClass({
mixins: [Router.State],
render: function() { ... }
});
如果我访问host.local/settings和日志this.getParams()一切正常,文件呈现Object {tab: undefined}在控制台中显示我.但是一旦我尝试host.local/settings/user- 我希望控制台返回类似的东西Object {tab: 'user'}- 整个事情就会崩溃并开始投入Uncaught SyntaxError: Unexpected token …
我想利用react-router的onEnter处理程序来提示用户在进入受限路由时进行身份验证.
到目前为止,我的routes.js文件看起来像这样:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
export default (
<Route path="/" component={App}>
<IndexRoute component={Landing} />
<Route path="learn" component={Learn} />
<Route path="about" component={About} />
<Route path="downloads" component={Downloads} onEnter={requireAuth} />
</Route>
)
理想情况下,我希望我的requireAuth函数是一个可以访问商店和当前状态的redux动作,就像这样:store.dispatch(requireAuth()).
不幸的是,我无法访问此文件中的商店.connect在这种情况下,我认为我不能真正使用它来访问我想要的相关操作.我也不能只import store从创建商店的文件中获取,因为在应用程序首次加载时这是未定义的.
我需要在react-router-dom中使用多个嵌套路由
我正在使用react-router-dom的v4
我有我的
import { BrowserRouter as Router, Route } from 'react-router-dom';
我需要像这样渲染组件
--- Login
--- Home
--- Page 1
--- Page 2
--- Page 3
--- About
--- etc
Home组件包含一个Header组件,该组件对于Page1,Page2和Page3组件是通用的,但在Login和About中不存在.
我的js代码就是这样读的
<Router>
<div>
<Route path='/login' component={Login} />
<Home>
<Route path='/page1' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</Home>
<Route path='/about' component={About} />
</div>
</Router>
我希望Login组件只显示在/ login当我请求/ page1,/ page2,/ page3时,它们应该分别包含Home组件和该页面的内容.
我得到的是渲染的Login组件,并在下面呈现Page1的组件.
我很确定我错过了一些非常微不足道的事情,或者在某个地方犯了一个非常愚蠢的错误,并且非常感谢我能得到的所有帮助.过去两天我一直坚持这个.
我正在构建一个具有指向预定义路由的链接的React应用程序.
<a href="/my/react/route/">Click Here</a>
路由解析正常,但它刷新了页面,从而降低了应用程序性能.如何避免重新渲染整个页面？
问题:如何通过React-Router的Link组件传递prop或单个值(如_id),并在端点捕获它？
这就是我的意思:假设我们在页面/ a上.链接将用户带到/ b.就这样<Link to='/b'>.现在,我需要通过链接传递_id,从/ a到/ b.
<Link to='/b' params={_id}>blah blah</Link>
我想要传递的id是Link组件嵌套在其中的对象的属性.
我params={}在另一个StackOverflow线程中找到了这种语法.我的代码编译没有破坏,所以这可能意味着它工作？但是,我不确定如何在端点处检索此传递的值.
任何帮助将不胜感激.
我有一个视觉/反应应用程序与反应路由器,我有一个简单的按钮在我的应用程序:
<Link className="dark button" to="/">Another Search</Link>
当我点击它时,我得到以下异常:
Uncaught TypeError: Cannot read property 'getHostNode' of null
错误来自:
getHostNode: function (internalInstance) {
return internalInstance.getHostNode();
},
知道为什么我得到这个？
我正在使用React和React Router与Redux建立网站.许多路由(页面)需要登录.如果用户未登录,我可以重定向到登录:
function requireAuth(nextState, replace) {
let loggedIn = store.getState().AppReducer.UserReducer.loggedIn;
if(!loggedIn) {
replace({
pathname: '/login',
state: {
nextpathname: nextState.location.pathname
}
});
}
}
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="login" component={Login} />
<Route path="register" component={Register} />
<Route path="dashboard" component={Graph} onEnter={requireAuth}>
... some other route requires logged in ...
</Route>
</Route>
</Router>
</Provider>,
document.getElementById('entry')
);
如果用户没有登录,请查看代码,我使用onEnter挂钩重定向到'/ login'路由.用于检查用户登录的数据是在商店中,并且在用户登录后它将更新.
它工作得很好,但问题是当我刷新页面时,存储将被重置并且用户没有登录状态.
我知道这是因为Redux存储只是内存存储,所以refesh页面会丢失所有数据.
检查服务器会话每次刷新都可以工作,但这可能是太多的请求,所以这看起来不错.
将登录状态数据保存到localStorage可能有效,但在这种情况下,我应该检查每个AJAX调用失败该请求被拒绝,因为会话已过期或不存在像某些东西,这看起来也是个坏主意.
有没有办法更清楚地解决这个问题？我的网站将会使用很多人,所以我希望尽可能减少XHR呼叫.
任何建议将非常感谢.
我正在尝试使用react-route Link刷新页面.但是我实现它的方式又向后退了一步.(例如,如果URL是../client/home/register,当我按下重新加载时转到../client/home)
下面是我的代码
const AppErrorPage = () => (
<div>
<div style={ styles.container }>
<h2>Error</h2>
<p> Something went wrong, please reload the page </p>
<div>
<Link to="" refresh="true">
<span>Reload</span>
</Link>
</div>
</div>
</div>
);
我想在我的公共布局中渲染我的一些路线,以及我的私人布局中的其他一些路线,是否有一个干净的方法来做到这一点？
示例显然不起作用,但我希望大致解释我正在寻找的内容:
<Router>
<PublicLayout>
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/about" component={AboutPage} />
</Switch>
</PublicLayout>
<PrivateLayout>
<Switch>
<Route exact path="/profile" component={ProfilePage} />
<Route exact path="/dashboard" component={DashboardPage} />
</Switch>
</PrivateLayout>
</Router>
我想要切换某些路由的布局,如何使用新的路由器做到这一点？
嵌套路由不再有效,并给我这个错误:
You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored
编辑:布局包装整个路径组也意味着只要您保留在同一个私有/公共路由组中,这些布局只会呈现一次.如果您的布局必须从您的服务器获取某些内容,这是一个大问题,因为如果您使用布局包装每个页面,那么每次更改都会发生这种情况.
我稍微调整了React Router示例,让私有路由与Redux一起玩得很好,但在链接或重定向到其他"页面"时没有呈现任何组件.这个例子可以在这里找到:
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 }
}}/>
)
)}/>
)
但是,因为我已将它合并到Redux应用程序中,所以我不得不稍微调整一下PrivateRoute,以便我可以访问redux存储以及路径Props:
const PrivateRouteComponent = (props) => (
<Route {...props.routeProps} render={() => (
props.logged_in ? (
<div>{props.children}</div>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}} /> )
)} />
);
const mapStateToProps = (state, ownProps) => …