我有一个几乎正常的简单反应路由项目。我有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}
中做了这件事(如果显而易见的话我很反应很抱歉)。
答案 0 :(得分:2)
在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>
);
}