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'));

main.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中，您不再像在早期版本的反应路由器中那样使用子项。

由于您可能希望导航栏在所有渲染视图中都可见，因此您只需将其从<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>
    );
  }

AppBar在React路线之间消失

1 个答案: