Ich habe dies zu Tode gegooglet und es ist sehr klar, dass dies ein häufiges Problem ist, aber alle Lösungen, die ich gefunden habe, scheinen nicht zu meinem Fall passen.Reagieren: Redux Zustand im Router onEnter
Ich bin ein Anfänger reagiert und haben Sie den folgenden Code angenommen:
const App = {
path: 'app',
onEnter: function (nextState, replace) {
console.log("onEnter", nextState);
/* somehow listen for redux state
if (!state.auth.user) {
replace('/login')
}
*/
},
getChildRoutes(partialNextState, cb) {
require.ensure([], (require) => {
cb(null, [
require('./routes/dostuff'),
require('./routes/domorestuff'),
])
})
},
getComponent(nextState, cb) {
require.ensure([], (require) => {
cb(null, require('./components/AppLayout'))
})
}
};
module.exports = App;
Gemäß dem Kommentar im onEnter ich vor dem Eintritt in diesem Weg authentifizieren müssen, aber ich bin nicht sicher, wie dies zu tun.
Ich habe versucht, die folgenden:
const mapStateToProps = (state) => {
return {
user: state.auth.user
}
};
module.exports = connect(
mapStateToProps
)(App);
aber diese erzeugt „nicht erfasste Fehler:. Sie eine Komponente an die Funktion von connect zurück passieren muss Stattdessen erhalten {“ Pfad „:“ app „}“
Der folgende Code wird verwendet, um die App und Speicher erstellen Bootstrap:
import React from 'react';
import {render} from 'react-dom';
import {createStore, applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import {applyRouterMiddleware, Router, Route, hashHistory, IndexRedirect, Redirect} from 'react-router';
import {syncHistoryWithStore, routerMiddleware} from 'react-router-redux';
import reducers from './reducers';
const middleware = routerMiddleware(hashHistory);
const store = createStore(
reducers,
applyMiddleware(middleware)
);
const history = syncHistoryWithStore(hashHistory, store);
function scrollToTop() {
window.scrollTo(0, 0);
}
const rootRoute = {
childRoutes: [{
path: '/',
component: require('./containers/App'),
indexRoute: {onEnter: (nextState, replace) => replace('/login')},
childRoutes: [
require('./routes/forgotPassword'),
require('./routes/login'),
{
path: '*',
indexRoute: {onEnter: (nextState, replace) => replace('/404')},
}
]
}]
};
render(
<Provider store={store}>
<Router
onUpdate={scrollToTop}
history={history}
routes={rootRoute}
/>
</Provider>,
document.getElementById('app-container')
);
ich die folgenden Versionen verwenden:
012.351."react": "^15.5.4",
"react-dom": "^15.5.4",
"react-hot-loader": "^3.0.0-beta.6",
"react-redux": "^5.0.5",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "~3.6.0",
Jede Hilfe würde sehr geschätzt werden.
Wo erstellen Sie Ihr Geschäft? –
Welche Version von Reagieren Router verwenden Sie? Könntest du ein wenig mehr Code für den App-Kontext posten? Ich denke, ich habe eine Idee, aber ich bin mir nicht sicher, ob es für Ihren Fall gilt. –
Danke. Ich habe die Frage bearbeitet, um hoffentlich die Informationen zu enthalten, die Sie benötigen. – bludginozzie