react-router 4.0的使用方法

旧城等待， 2022-05-29 12:12 80阅读 0赞

在react-router 4.0以及之后的版本，使用react-router都只需要引用一个react-router-dom即可。

使用方法：

root.js

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import Team1 from './components/Team1/team1';
    import Team2 from './components/Team2/team2';
    import { Route, HashRouter} from 'react-router-dom';
    import registerServiceWorker from './registerServiceWorker';
    
    export default class Root extends React.Component {
      render() {
        return(
          <HashRouter>
            <App>
              <Route path="/team1" component={Team1}></Route>
              <Route path="/team2" component={Team2}></Route>
            </App>
          </HashRouter>
        )
      }
    }
    
    ReactDOM.render(<Root />, document.getElementById('root'));
    registerServiceWorker();

App.js:

import { Link } from 'react-router-dom';
    class App extends Component {
      render(){
        return(
    <ul>
      <li><Link to="/Manager">Team 1</Link></li>
      <li><Link to="/Team1">Team 1</Link></li>
      <li><Link to="/Team2">Team 1</Link></li>
    </ul>
    <div class="content">
      {this.props.children}
    </div>
        )
      }
    }
    export default App

Team1.js:

import React, { Component } from 'react';
    
    class Team1 extends Component {
      render() {
        return (
          <h1>Team1</h1>
        )
      }
    }
    
    export default Team1;

Team2.js:

import React, { Component } from 'react';
    
    class Team2 extends Component {
      render() {
        return (
          <h1>Team2</h1>
        )
      }
    }
    
    export default Team2;

发表评论取消回复

表情：

评论列表（有 0 条评论，80人围观）

还没有评论，来说两句吧...

相关阅读

相关 40、作业

1、![b72f11ec5e804f949c879be79c2591e5.png][] //我的代码： package Homework__; p

我不是女神ヾ/ 2024年03月31日 10:00/ 0 赞/ 2 阅读

相关 MySQL-40：表的复制

常见的复制方法有三种： mysqldump 方法，CSV 文件，物理拷贝方法。 40.1 mysqldump 使用mysqldump命令将数据导出成一组inser

水深无声/ 2023年01月02日 05:28/ 0 赞/ 55 阅读

相关华为 Mate 40 系⁠列详细参数对比，Mate 40\40Pro\40Pro+\40RS

Mate 40 系列 2020年10月22日晚，华为 Mate 40 系列发布，共4款机型。 ![在这里插入图片描述][watermark_type_ZmFuZ3po

太过爱你忘了你带给我的痛/ 2022年12月17日 08:46/ 0 赞/ 426 阅读

相关红米K40系列详细参数对比，K40\K40Pro\K40Pro+

红米K40系列 2020年2月25日晚，红米发布了旗舰机型K40系列，共有K40、K40 Pro、K40 Pro+三款，起步价1999元，正式接过了当年小米的售价传承，性

淡淡的烟草味﹌/ 2022年11月03日 00:53/ 0 赞/ 266 阅读

相关 React实战-通过ReactRouter-example分析Router用法

React实战\-通过ReactRouter-example分析Router用法在我们了解完一种新的Web框架或者语言后，总是从各个单个的知识点了解，做着一个一个Demo,

淩亂°似流年/ 2022年09月26日 02:09/ 0 赞/ 143 阅读

相关钱生钱的40个方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bjI3

深碍√TFBOYSˉ_/ 2022年05月20日 10:20/ 0 赞/ 203 阅读

相关客观面试题--40.使用泛型的好处？

泛型好处：泛型简单易用类型安全泛型的主要目标是实现java的类型安全。泛型可以使编译器知道一个对象的限定类型是什么，这样编译器就可以在一个高的程度上验证这个类型

傷城~/ 2022年05月19日 01:08/ 0 赞/ 80 阅读

相关 Java学习笔记40：预定义流的使用

数据的输入输出操作都是以（stream）的方式进行，JDK提供了java.io包按数据流的方向不同：输入流、输出流按处理数据单位不同：字节流，字符流字节流以字节

野性酷女/ 2022年03月29日 14:41/ 0 赞/ 85 阅读

相关 IDE工具(40) idea设置类、方法注释

先上效果图吧： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

短命女/ 2022年01月31日 09:55/ 0 赞/ 141 阅读

相关简单而又详细的react+reactRouter+redux项目

看了网上的很多关于reactRouter和redux的文章，感觉自己理解的都很乱，众说纷纭，不知道从何下手，其实我就是想要一套开发项目的模板，就这么简单。看了挺多文章，所以现在

小咪咪/ 2021年09月15日 05:12/ 0 赞/ 264 阅读