React 可用于任何组件的路由间导航方法
React 可用于任何组件的路由间导航方法
yihong酱 发表于3个月前
React 可用于任何组件的路由间导航方法
  • 发表于 3个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

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

标签: React
共有 人打赏支持
粉丝 0
博文 24
码字总数 5279
×
yihong酱
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: