Правильный шаблон страницы входа

Question

Я прошу прощения за мой глупый вопрос, но я действительно новичок в реакции, и эта проблема заставляет меня застрять на несколько дней. Я немного запутался, чтобы сделать страницу входа в реагировать. Мой код app.js выглядит так:

import React from 'react';
import {HashRouter as Router, Route} from 'react-router-dom';
import asyncComponent from './AsyncComponent';
import AppShell from './AppShell';
import Login from './login/Login';

const Dashboard = asyncComponent(() => {
  return import(/* webpackChunkName: "dashboard" */ './dashboard/Dashboard')
    .then(module => module.default);
});

const LoginPage = asyncComponent(() => {
  return import(/* webpackChunkName: "login" */ './login/Login')
    .then(module => module.default);
});

class App extends React.Component {
    render() {
        return (
            <Router>
                <AppShell>
                    <div>
                        <Route exact path="/" component={Dashboard} />
                        <Route path="/login" component={LoginPage} />
                    </div>
                </AppShell>
            </Router>
        );
    }
}

export default App;

А это мой код AppShell:

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import {MuiThemeProvider} from 'material-ui/styles';
import {AppBar, Drawer, MenuItem} from 'material-ui';
import {DashboardIcon} from './icon/Icons';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';

const ContentStyle = {
  width: '90%',
  margin: 'auto',
  marginTop: '30px'
};

class SidebarDrawer extends React.Component {
  componentDidMount() {
    let frameCount = 0;
    const open = () => (frameCount++ > 0) ? this.props.onMounted() :
      requestAnimationFrame(open);
    requestAnimationFrame(open);
  }

  render() {
    return (
      <Drawer
        docked={false}
        width={200}
        open={this.props.open}
        onRequestChange={this.props.onRequestChange}
      >
        <MenuItem
          primaryText={'Dashboard'}
          leftIcon={<DashboardIcon/>}
          containerElement={<Link to={'/'}/>}
          onClick={this.props.onClick}
        />
      </Drawer>
    );
  }
}

class AppShell extends Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false,
      drawer : false
    };
  }

  handleDrawerToggle = (e) => {
    if (!this.state.drawer) {
      this.setState({drawer: true});
      e.preventDefault();
    } else {
      this.setState({open: !this.state.open});
    }
  }

  render() {
    const LazySidebarDrawer = this.state.drawer && (<SidebarDrawer
      open={this.state.open}
      onMounted={() => this.setState({open: true})}
      onClick={() => this.setState({open: false})}
      onRequestChange={open => this.setState({open: open})}
    />)

    return (
      <MuiThemeProvider>
        <div>
          <AppBar
            title="Dashboard"
            iconClassNameRight="muidocs-icon-navigation-expand-more"
            onLeftIconButtonTouchTap={this.handleDrawerToggle}
          />
          {LazySidebarDrawer}
          <div id="content" style={ContentStyle}>
            {React.cloneElement(this.props.children)}
          </div>
        </div>
      </MuiThemeProvider>
    );
  }
};

export default AppShell;

Но я все еще могу получить доступ к панели инструментов, когда открываю страницу входа. Как правильно выбрать шаблон для страницы входа?

Спасибо

Answer 1

Ваша маршрутизация правильная, точный '/' будет отображать компонент Dashboard только тогда, когда путь будет '/'. То, что вы видите, это панель инструментов или компонент AppBar. Ящик панели инструментов по-прежнему находится на экране входа в систему, поскольку он всегда присутствует в коде AppShell, а ваши маршруты являются дочерними для AppShell. Потенциальным решением было бы переместить этот компонент AppBar в ваш компонент Dashboard, если вы этого хотите только там.