1
У меня довольно простая установка входа (код ниже) с несколькими компонентами, требующими аутентификации. Когда я перехожу на http://localhost:8000/, он перенаправляется на http://localhost:8000/login, и все в порядке. Если я вхожу в систему, он возвращается к http://localhost:8000/ и отображает мой основной компонент.Странная проблема навигации с реактивным маршрутизатором
Однако, когда я перехожу непосредственно к http://localhost:8000/login, он говорит: «Не могу GET/login». То же самое с моим компонентом «about». Он работает, когда я добавляю символ фунта: http://localhost:8000/#/login. Может ли кто-нибудь объяснить, что происходит?
var React = require('react');
var Main = require('./components/main');
var Login = require('./components/login');
var About = require('./components/about');
var SessionStore = require('./stores/session-store')
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router, Route, Link, History, IndexRoute } from 'react-router';
var App = React.createClass({
render: function() {
return <div>
{this.props.children}
</div>
}
});
function requireAuth(nextState, replaceState) {
if(!SessionStore.isLoggedIn()){
replaceState({ nextPathname: nextState.location.pathname }, '/login');
}
}
function redirectIfLoggedIn(nextState, replaceState){
if(SessionStore.isLoggedIn()){
replaceState({ nextPathname: nextState.location.pathname }, '/');
}
}
var routes = (
<Router history={createBrowserHistory()}>
<Route path="/" component={App}>
<IndexRoute component={Main} onEnter={requireAuth}/>
<Route path="login" component={Login} onEnter={redirectIfLoggedIn} />
<Route path="about" component={About} onEnter={requireAuth} />
</Route>
</Router>
)
React.render(routes, document.querySelector('.container'));