使用react-router 5.x 版本实现

1.  下载react的路由模块  5.0

    npm install react-router-dom@5 --save]


2 . 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件  


    (注: 哈希模式用HashRouter 历史模式用BrowserRouter)
  代码:   import { HashRouter } from 'react-router-dom'
    ReactDOM.render(
          <HashRouter >
            <App />
        </HashRouter >,
          document.getElementById('root')
    );


3. 创建路由文件src/router/index.js,  并从路由模块中导入工具组件Route 
  3.1  import { Route, Switch,Redirect  } from "react-router-dom";

3.2引入组件
3.3, 创建路由组件,配置路由, 并导出
    export default function MyRouter(){
        return(
            <Switch >

                {/* exact  精确匹配 因为每一个路由都有/ 不精确下 都会匹配主页*/}
                <Route exact path="/"  component={Home} />
                {/* 路由重定向, 使用Redirect组件实现, 要写在最后 */}
                <Redirect from="/" to="/home" />
            </Switch >
        )
    }

4, 在app.js中导入路由组件  

导入路由组件


    import RouterView from './router/index';
    在根组件app模板中添加路由组件,即路由出口 
    <RouterView></RouterView>


5.在需要跳转的页面, 从路由模块导入工具组件 Link
    import {Link} from 'react-router-dom'
 使用Link组件执行路由跳转
    <Link to="/">首页/Link>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值