Question

如何添加多个根路由？我的登录页面的html结构与其他经过身份验证的页面（DashBoard，manageubscription等）完全不同。

我创建了login.jsx，如下所示： -

var React = require('react');

var Login = React.createClass({
    displayName: 'Login',
    render() {
        return (
            <div>
            <div>Login</div>
            <form>
                User Name: <input type="text" name="username"/>
                Password<input type="password" name="password"/>
                <input type="submit"/>
            </form>
            </div>

        );
    }
});

module.exports = Login;

Router.js

ReactDOM.render((
  <Router history={History}>
    <Route path="/" component={App}>
      <Route path="login" component={Login}/>
      <Route path="dashboard" component={Dashboard} />
      <IndexRoute component={Login}/>
    </Route>
  </Router>
), document.getElementById('tstdiv'));

app.jsx

var React = require('react');
var Router = require('react-router');

var App = React.createClass({
    render: function(){
        return (
            <div>
                {this.props.children}
            </div>
        );
    }
});

module.exports = App;

如何创建AuthenticatedApp.jsx（用于仪表板，manageubscription），如下所示？

var React = require('react');
var Router = require('react-router');

var AuthenticatedApp = React.createClass({
    render: function(){
        return (
            <div>
            <Header/>
                {this.props.children}
            <Footer/>
            </div>
        );
    }
});

module.exports = AuthenticatedApp;

Answer 1

一个选项可能是将App.jsx更改为以下内容：

var React = require('react');
var Router = require('react-router');
var Header = require('path/to/header');
var Footer = require('path/to/footer');

var App = React.createClass({
    render: function(){
        if (this.props.location.pathname === '/login') {
             Header = null; 
             Footer = null;
        }
        return (
            <div>
                <Header />
                {this.props.children}
                <Footer />
            </div>
        );
    }
});

基本上，如果它是登录页面，我们隐藏页眉和页脚，在其他每种情况下（经过身份验证的页面）都会显示页眉和页脚。

但是我觉得有另一种方法可以通过改变路由的设置方式来实现，所以我们可以删除这个渲染中的if条件。

React Router 1.0 Multiple <route>

1 个答案: