我正在开发一个应用程序，我在其中检查用户是否不是loggedIn. 我有显示登录表单，否则dispatch一个action将改变路线和加载其他组件。这是我的代码：
render() {
if (isLoggedIn) {
// dispatch an action to change the route
}
// return login component
<Login />
}
我如何才能实现这一点，因为我无法更改render函数内部的状态。
考虑到您正在使用 react-router v4
使用你的组件withRouter和history.pushfrom props来改变路线。您只需要withRouter在您的组件未接收到Routerprops时才需要使用根本没有链接到路由器，而是作为独立于路由的组件呈现。
import {withRouter} from 'react-router';
class App extends React.Component {
...
componenDidMount() {
// get isLoggedIn from localStorage or API call
if (isLoggedIn) {
// dispatch an action to change the route
this.props.history.push('/home');
}
}
render() {
// return login component
return <Login />
}
}
export default withRouter(App);
重要的提示
如果您正在使用
withRouter以防止更新被 阻止shouldComponentUpdate，那么withRouter包装实现 的组件很重要shouldComponentUpdate。例如，当使用 Redux 时：// 这得到解决
shouldComponentUpdatewithRouter(connect(...)(MyComponent))// 这不
connect(...)(withRouter(MyComponent))
或者你可以使用重定向
import {withRouter} from 'react-router';
class App extends React.Component {
...
render() {
if(isLoggedIn) {
return <Redirect to="/home"/>
}
// return login component
return <Login />
}
}
使用react-router v2 or react-router v3，您可以使用context动态更改路线，例如
class App extends React.Component {
...
render() {
if (isLoggedIn) {
// dispatch an action to change the route
this.context.router.push('/home');
}
// return login component
return <Login />
}
}
App.contextTypes = {
router: React.PropTypes.object.isRequired
}
export default App;
或使用
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
在react-router版本 4 中：
import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
const Example = () => (
if (isLoggedIn) {
<OtherComponent />
} else {
<Router>
<Redirect push to="/login" />
<Route path="/login" component={Login}/>
</Router>
}
)
const Login = () => (
<h1>Form Components</h1>
...
)
export default Example;
另一种选择是使用 Thunk 风格的异步操作（这是安全的/允许有副作用）来处理这个问题。
如果您使用 Thunk，您可以使用 将相同的history对象注入到您的<Router>组件和 Thunk 操作中thunk.withExtraArgument，如下所示：
import React from 'react'
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
import { createBrowserHistory } from "history"
import { applyMiddleware, createStore } from "redux"
import thunk from "redux-thunk"
const history = createBrowserHistory()
const middlewares = applyMiddleware(thunk.withExtraArgument({history}))
const store = createStore(appReducer, middlewares)
render(
<Provider store={store}
<Router history={history}>
<Route path="*" component={CatchAll} />
</Router
</Provider>,
appDiv)
然后在你的 action-creators 中，你会有一个history可以安全地与 ReactRouter 一起使用的实例，所以如果你没有登录，你可以触发一个常规的 Redux 事件：
// meanwhile... in action-creators.js
export const notLoggedIn = () => {
return (dispatch, getState, {history}) => {
history.push(`/login`)
}
}
这样做的另一个优点是现在 url 更容易处理，因此我们可以将重定向信息放在查询字符串等上。
您仍然可以尝试在您的 Render 方法中执行此检查，但如果它导致问题，您可能会考虑在componentDidMount或生命周期中的其他地方执行此检查（尽管我也理解坚持使用无状态功能组件的愿望！）
您仍然可以使用 Redux 并将mapDispatchToProps动作创建器注入您的组件，因此您的组件仍然只是松散地连接到 Redux。
这是我的把手loggedIn。react-router v4
path如果用户已登录，则允许进入 PrivateRoute并将令牌保存到localStorge
function PrivateRoute({ component: Component, ...rest }) {
return (
<Route
{...rest}
render={props => (localStorage.token) ? <Component {...props} /> : (
<Redirect
to={{
pathname: '/signin',
state: { from: props.location },
}}
/>
)
}
/>
);
}
在此处定义应用程序中的所有路径
export default (
<main>
<Switch>
<Route exact path="/signin" component={SignIn} />
<Route exact path="/signup" component={SignUp} />
<PrivateRoute path="/" component={Home} />
</Switch>
</main>
);
那些在react-router v4上实现这一点时遇到问题的人。这是一个以编程方式浏览 react 应用程序的工作解决方案。
历史.js
import createHistory from 'history/createBrowserHistory'
export default createHistory()
App.js 或 Route.jsx。将历史作为props传递给您的路由器。
import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
<Route path="/test" component={Test}/>
</Router>
您可以使用push()导航。
import history from './history'
...
render() {
if (isLoggedIn) {
history.push('/test') // this should change the url and re-render Test component
}
// return login component
<Login />
}
感谢这条评论：https : //github.com/ReactTraining/react-router/issues/3498#issuecomment-301057248