Блог

У меня есть компонент входа в систему и панель мониторинга. Моей точкой входа в приложение является страница входа. После успешного входа в систему я хочу перейти на главную страницу (панель инструментов и навигация).

Я попробовал это следующим образом, но это не работает. После входа в систему не удается перейти на панель мониторинга.
Мой компонент входа в систему

 var React = require('react');
var {Link} = require('react-router');
var Dashboard = require('Dashboard');

var Login = React.createClass ({
onFormSubmit: function(e){
    e.preventDefault();
   <Dashboard /> 
},
render: function(){
  return (
<div>
  <h1 className="text-center">Login</h1>
  <form onSubmit={this.onFormSubmit}>
        <input type="text" ref="username"/>

        <button className="button">Login</button>
  </form>
 </div>
 )
 } 
 });

module.exports = Login;
  

Мой компонент панели мониторинга

  var React = require('react');
 var Nav = require('Nav');

 var Dashboard = (props) => {
   return (
     <div>
      <Nav/>
      <div className="row">
        <div className="columns medium-6 large-4 small-centered">
        {props.children}
      </div>
     </div>
   </div>
 );
}

module.exports = Dashboard;
  

Основной файл app.jsx

 var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Login = require('Login');
var Dashboard = require('Dashboard');
var About = require('About');
var Examples = require('Examples');

ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Login}>
     <Route component={Dashboard}>
       <Route path="about" component={About}/>
       <Route path="examples" component={Examples}/>
    </Route>
   </Route>
  </Router>,
 document.getElementById('app')
 );
  

Ваш onFormSumit() должен быть таким

 onFormSubmit: function(e){
    e.preventDefault();
   window.location.href = '/dashboard'
},
  

И ваш <Router/> in app.jsx должен быть таким

 <Router history={hashHistory}>
   <Route path="/" component={Login} />
   <Route path="dashboard" component={Dashboard} />
   <Route path="about" component={About}/>
   <Route path="examples" component={Examples}/>
 </Router>
  

Это приведет к перенаправлению браузера /dashboard на отправку формы. Этот перенаправленный url( /dashboard ) будет захвачен, <Router/> и компонент для этого path будет отображаться.

[Обновить]

В вашем express случае вам нужно добавить путь, чтобы он всегда возвращал index.html страницу. Добавьте это

 app.get(['/', '/dashboard'], function(req, res){
  res.sendfile('./path to your index.html file')
})
  

или вы также можете сделать следующее

 app.get('*', function(req, res){
   res.sendfile('./path to your index.html file')
})
  

Для дальнейшего чтения проверьте это