react-router-dom <Redirect /> 不使用 syncHistoryWithStore 吗?
Is react-router-dom <Redirect /> not working with syncHistoryWithStore?
我试图在尝试访问需要某些权限的页面时将用户重定向到登录页面。基本上,/
路由要求用户登录,所以我将他们重定向到 /signin
如果他们不是。
使用 react-router-redux 的 syncHistoryWithStore,重定向就不会发生。当我删除它时,它会按预期工作。
syncHistoryWithStore是否与最新版本的react-router不兼容-dom?
这是 reproduction。您可以取消注释不使用 syncHistoryWithStore 的历史记录行,看看它是否按预期工作。
同时在 Whosebug 上嵌入代码。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { createBrowserHistory } from 'history';
import { Router, Route, Redirect } from 'react-router-dom';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
const store = createStore(
combineReducers({
routing: routerReducer
})
);
const history = syncHistoryWithStore(createBrowserHistory(), store);
//const history = createBrowserHistory();
function SignIn(){
return (
<div>This is SignIn.</div>
);
}
function Home(){
return (
<div>This is Home.</div>
);
}
const isLoggedIn = false;
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<div>
<Route exact path="/signin" component={SignIn} />
<Route
exact
path="/"
render={() => isLoggedIn ? <Home /> : <Redirect to="/signin" />}
/>
</div>
</Router>
</Provider>,
window.document.getElementById('root')
);
正如 Tharaka 指出的那样,自述文件提到尚不支持 react-router v4。
我试图在尝试访问需要某些权限的页面时将用户重定向到登录页面。基本上,/
路由要求用户登录,所以我将他们重定向到 /signin
如果他们不是。
使用 react-router-redux 的 syncHistoryWithStore,重定向就不会发生。当我删除它时,它会按预期工作。
syncHistoryWithStore是否与最新版本的react-router不兼容-dom?
这是 reproduction。您可以取消注释不使用 syncHistoryWithStore 的历史记录行,看看它是否按预期工作。
同时在 Whosebug 上嵌入代码。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { createBrowserHistory } from 'history';
import { Router, Route, Redirect } from 'react-router-dom';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
const store = createStore(
combineReducers({
routing: routerReducer
})
);
const history = syncHistoryWithStore(createBrowserHistory(), store);
//const history = createBrowserHistory();
function SignIn(){
return (
<div>This is SignIn.</div>
);
}
function Home(){
return (
<div>This is Home.</div>
);
}
const isLoggedIn = false;
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<div>
<Route exact path="/signin" component={SignIn} />
<Route
exact
path="/"
render={() => isLoggedIn ? <Home /> : <Redirect to="/signin" />}
/>
</div>
</Router>
</Provider>,
window.document.getElementById('root')
);
正如 Tharaka 指出的那样,自述文件提到尚不支持 react-router v4。