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

最新推荐文章于 2025-06-16 20:23:48 发布

转载最新推荐文章于 2025-06-16 20:23:48 发布 · 150 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/yihong/blog/1529027

文章标签：

#javascript #python #ViewUI

本文介绍如何在React应用中使用react-router-dom实现页面间的导航与过渡动画。通过具体实例展示了如何配置路由、导入组件以及使用history对象进行页面跳转。

2019独角兽企业重金招聘Python工程师标准>>>

可以在这里查看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')}来实现页面导航

转载于:https://my.oschina.net/yihong/blog/1529027