react-router 4.0的使用方法

旧城等待， 2022-05-29 12:12 128阅读 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 条评论，128人围观）

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

相关阅读

相关 P05: 实例-ReactRouter嵌套路由

React Router 阐述用脚手架创建项目初始化基本目录添加基本样式编写frontCourse中的子页面编写 \`Fro

逃离我推掉我的手/ 2023年10月06日 20:59/ 0 赞/ 67 阅读

相关 P04: ReactRouter路由重定向-Redirect使用

React Router 阐述标签式重定向编程式重定向示例 ReactRouterDemo\\demo01\\src\\inde

待我称王封你为后i/ 2023年10月06日 20:58/ 0 赞/ 80 阅读

相关 P02: 使用ReactRouter制作网页

React Router 阐述编写Index组件编写List组件修改 \`AppRouter.js\` 文件 exact 精准匹

一时失言乱红尘/ 2023年10月06日 20:58/ 0 赞/ 67 阅读

相关 Flutter移动电商实战 --（40）路由_Fluro的全局注入和使用方法

路由注册到顶层，使每个页面都可以使用，注册到顶层就需要在main.dart中 main.dart注册路由 ![1090399-20190908222928162-720

素颜马尾好姑娘i/ 2023年06月01日 06:04/ 0 赞/ 63 阅读

相关 14.笨方法学python 习题40

Python是一种“面向对象编程语言”。这种说法的意思是，python里边有一种叫类（class）的结构，通过它可以用一种特殊的方式构造软件。模块和字典差不多

小鱼儿/ 2023年03月13日 11:57/ 0 赞/ 17 阅读

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

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

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

相关 ReactRouter 4 前瞻

ReactRouter 4 这次改动挺大的，后面又要折腾一次了！！作者：杨森链接：https://zhuanlan.zhihu.com/p/

青旅半醒/ 2022年09月26日 04:56/ 0 赞/ 67 阅读

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

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

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

相关钱生钱的40个方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bjI3

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

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

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

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