react - router路由的使用

最新推荐文章于 2024-07-27 11:38:12 发布

杜杜的杜

最新推荐文章于 2024-07-27 11:38:12 发布

阅读量331

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_33871178/article/details/88221699

版权

本文介绍了如何在React应用中使用`react-router`实现页面切换效果。首先讲解了如何安装`react-router`，并提供了官方学习资源。接着详细阐述了在`app.jsx`、`about.jsx`、`home.jsx`等组件中的应用。文章特别强调了`NavLink`组件的优化使用，并创建了自定义组件`MyNavLink.jsx`。此外，还讨论了路由嵌套、通过路由链接传递数据以及不同层级路由的实现，如在`message.jsx`中传递`id`到`detail.jsx`的`MessageDetail.jsx`组件。最后，文章提到了两种路由跳转方式，包括使用`history.push`和`history.replace`，以及利用`window.location`进行页面跳转。

摘要由CSDN通过智能技术生成

实现切换效果

1.静态组件

2.安装router

npm install --save react-router

https://reacttraining.com/react-router/ 路由学习的官网-很多案例

3.app.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {NavLink,Switch,Route,Redirect} from 'react-router-dom'

import About from '../views/about'
import Home from '../views/home'




export default class App extends Component{
   
   
    render(){
      
        return(
            <div>
               <h2>router  demo...</h2>
               <div className="container">
                   <div className="row">
                        <div className="col-md-2">
                            <div className="list-group">
                                 <NavLink className='list-group-item' to='/home'>Home</NavLink>
                                <NavLink className='list-group-item' to='/about'>About</NavLink>
                               
                            </div>
                        </div>
                        <div className="col-md-6">
                              <div className="panel">
                                 <div className="panel-body">
                                    <Switch>
                                        <Route path='/home' component={Home} />
                                        <Route path='/about' component={About} />
                                        <Redirect to='/home'/>
                                    </Switch>
                                 </div>
                              </div>
                        </div>
                   </div>
                
                 
               </div>
             
            </div>
        )
    }
}

4.about.jsx

import React,{Component} from 'react'
export default class About extends Component{
    render(){
        return(
            <div>about route Component</div>
        )
    }
}

4. home.jsx

import React,{Component} from 'react'
export default class Home extends Component{
    render(){
        return(
            <div>
                home react Component
            </div>
        )
    }
}

5. index.js

import React from 'react';
import {render} from 'react-dom';
import {BrowserRouter} from 'react-router-dom'

import './index.css';
import App from './components/app'
import * as serviceWorker from './service