AppBar 在 React 路由之间消失

Question

我有一个几乎可以工作的简单反应路由项目。我有一个AppBar 和一个Drawer（使用mui）。抽屉中有三个项目，它们将重新路由应用程序。我的路由工作正常，但我遇到的问题是AppBar，因此一旦你在某个页面上，应用程序其余部分的导航不再存在。我正在使用 react-router-dom v4.x.x 以防万一对你很重要。

index.js

import 'core-js/fn/object/assign';
import React from 'react';
import ReactDOM from 'react-dom';
import MainView from './pages/Main';
import { BrowserRouter as Router, Route, IndexRoute} from 'react-router-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import CloudProperties from './components/cloudproperties';
import CloudPropertiesNew from './components/cloudpropertiesnew';
import ServiceDetails from './components/servicedetails';
import ServiceRegistrationSummary from './components/serviceregistrationsummary';

injectTapEventPlugin();

ReactDOM.render((
  <MuiThemeProvider>
    <Router>
      <Route exact path="/" component={MainView}>
        <IndexRoute component={CloudProperties} />
        <Route path="cloudproperties" component={CloudProperties} />
        <Route path="cloudpropertiesnew" component={CloudPropertiesNew} />
        <Route path="servicedetails" component={ServiceDetails} />
        <Route path="serviceregistrationsummary" component={ServiceRegistrationSummary} />
      </Route>
    </Router>
  </MuiThemeProvider>
), document.getElementById('app'));

ma​​in.js (app.js)

require('normalize.css/normalize.css');
require('styles/App.css');

import React from 'react';
import Header from '../components/Header';



class MainView extends React.Component {
  constructor(props){
    super(props);

    this.state = {
    };

  }

  render() {
    return (
      <div>
        <Header
          routerProps={this.props.children} />
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

MainView.defaultProps = {
};

export default MainView;

我知道这与被注射的孩子有关，但我认为我是在 main.js 和 {this.props.children} 中这样做的（如果很明显，我是新手，很抱歉）。

Answer 1

在 React Router V4 中，您不再像在早期版本的 React Router 中那样使用子节点。

由于您可能希望导航栏在所有渲染视图中可见，您只需将其从 <switch> 或 <route> 组件中完全删除

在您的实例中，代码如下所示：

ReactDOM.render((
  <MuiThemeProvider>
    <Router>
      **<NavComponent />**
      <Route exact path="/" component={MainView}>
        <IndexRoute component={CloudProperties} />
        <Route path="cloudproperties" component={CloudProperties} />
        <Route path="cloudpropertiesnew" component={CloudPropertiesNew} />
        <Route path="servicedetails" component={ServiceDetails} />
        <Route path="serviceregistrationsummary" component={ServiceRegistrationSummary} />
      </Route>
    </Router>
  </MuiThemeProvider>
), document.getElementById('app'));

这是我如何使用 React Router V4 呈现应用栏的示例：

在我的 <App /> 组件中渲染函数，该函数刚刚被 <Router> 组件包裹。

render() {
    return (
    <div>
      <Nav />
      <Snackbar
        open={this.props.snackbar.get().open}
        message={this.props.snackbar.get().message}
        autoHideDuration={4000}
        onRequestClose={() => this.handleSnackbarRequestClose()}
      />
      <TreeViewer />
      <main style={{margin: '0 15px'}}>
        <Switch>
          <Route exact path='/'   render={(props) => (<Home {...props} />) } />
          <Route path='/accounts' render={(props) => (<AccountIndex { ...props }/>)}/>
          <Route path='/users'    render={(props) => (<UserIndex {...props }/>)} />
          <Route path='/login'    render={(props) => (<Login {...props}/>)} />
          <Route path='/logout'   render={(props) => (<Logout {...props}/>)} />
        </Switch>
      </main>
    </div>
    );
  }

Nav.js 中的渲染函数

render() {
    const activeStyle = {
      borderBottom: `${colorPalette.accent1Color} 4px solid`,
      paddingBottom: '6px',
      marginBottom: '-12px' 
    };

    return (
      <div>
        <AppBar
          title={<Link to='/' style={{color: colorPalette.accent1Color, textDecoration: 'none'}}><span style={{fontWeight: 200}}>GBDX Dashboard</span></Link>}
          iconElementLeft={ <Link to='/'><img className="logo logo-white" src="/images/dg-logo.svg" alt="DigitalGlobe logo" style={{ height: '36px', marginLeft: '8px' }}/></Link> }
          iconElementRight={ this.state.loggedInUserEmail ? <LoggedInUserInfo userEmail={this.state.loggedInUserEmail} logout={() => history.push('logout', { redirect : location.pathname })} /> : <Login login={() => history.push('login', { redirect : location.pathname })}/> }
        />
    <Toolbar style={{backgroundColor: '#41658b'}}>
          <ToolbarGroup firstChild={true}>
              { this.props.viewer.get() &&
                <NavLink to={`/accounts/${ this.props.viewer.get().account_id }`} activeStyle={ activeStyle } >
                  <FlatButton label="Your Account" style={{color: '#fff'}} />
                </NavLink>
              }
              <NavLink exact to='/accounts' activeStyle={ activeStyle }><FlatButton label="Accounts" style={{color: '#fff'}} /></NavLink>
              <NavLink exact to='/users' activeStyle={ activeStyle }><FlatButton label="Users" style={{color: '#fff'}} /></NavLink>
          </ToolbarGroup>
        </Toolbar>
      </div>
    );
  }