React 可用于任何组件的路由间导航方法

可以在这里查看demo
https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964
使用react-router-dom路由组件及this.props.history.push('/*')}实现路由间导航

1.在route.js中添加

import App from './containers/App';
import { BrowserRouter as Router } from 'react-router-dom';
import { Route } from 'react-router-dom';

export const renderRoutes = () => (
<Router >
<div>
<Route path="/"  component={App}></Route>

</div>
</Router>
)

2.在index.js中添加

import  { renderRoutes } from './routes';
import ReactDOM from 'react-dom';

ReactDOM.render(renderRoutes(), document.getElementById('root'));

3.在app.js中进行布局(用的materialui)

<Grid container >
<Grid item  sm={2}>．．．．
<ListItem button  onClick={()=>this.props.history.push('/cart')}>Cart</ListItem>
　　</Grid>
　　<Grid item xs={12} sm={10}>　
　　<main className={classes.content} >
　　　<Route path="/products"  component={Products}></Route>
　　　<Route path="/products/books"  component={BooksContainer}></Route>
　　　<Route path="/products/music"  component={MusicContainer}></Route>
　　　<Route path="/cart"  component={CartContainer}></Route>
</main>
　　</Grid>

## 使用this.props.history.push('/cart')}来实现页面导航