React16+react-router-dom初步使用心得

最新推荐文章于 2024-08-06 16:47:23 发布

Halcyon.

最新推荐文章于 2024-08-06 16:47:23 发布

阅读量438

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/Hhalcyon/article/details/107561572

版权

本文介绍了在React16中使用react-router-dom的基本步骤，包括设置index.html、index.js的重要性，以及如何配置路由。通过HashRouter、Switch、exact等元素实现路由管理，并展示了url参数的两种传递方式。

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

本文不讲怎么安装，讲怎么使用。
单位做项目用的React，在闲的时候想自己试试，写写小demo练下手。React上手没几天，主要是以前学过，但是后来偷懒用Vue写页面，不知不觉已经React16了，按照记忆的路线，删删改改脚手架的文件夹后，惊讶的发现并不能start，看了看package.json后，更一头雾水。
在这里插入图片描述
度娘了一下，关于这方面的资料比较少，多数的解释是你看看node_modules的源文件，可以看到XXXXX。。。远水治不了近渴，首要的，是让我的小demo能够运行起来，经过我的多次失败的尝试，总结出来了两点：
1、在public下面要有一个index.html，并且名字一定是index，不然会报错文件找不到。这个文件是用来放最核心的html结构的文件，我的内容如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="root"></div>
</body>

然后有个点，就是一定要注意自己将要被添加Dom节点的名字，因为在后面ReactDOM.render()的时候会去根据你写的条件查找Dom节点，节点名字没对会报错。例如我这里是要在id='root’这个点添加内容，那么我的ReactDOM就这么写：

ReactDOM.render(<Router />, document.getElementById('root'))

2、在src中一定要有一个名字为index.js的文件，并且名字一定是index，原因同上。这个文件放app.js等内容，也可以是Router组件的引用等等。我的文件内容如下：

import ReactDOM from 'react-dom';
import React, {
    Component } from 'react';
import Router from './router';

ReactDOM.render(<Router />, document.getElementById

最低0.47元/天解锁文章

Halcyon.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React16+react-router-dom初步使用心得

本文不讲怎么安装，讲怎么使用。单位做项目用的React，在闲的时候想自己试试，写写小demo练下手。React上手没几天，主要是以前学过，但是后来偷懒用Vue写页面，不知不觉已经React16了，按照记忆的路线，删删改改脚手架的文件夹后，惊讶的发现并不能start，看了看package.json后，更一头雾水。度娘了一下，关于这方面的资料比较少，多数的解释是你看看node_modules的源文件，可以看到XXXXX。。。远水治不了近渴，首要的，是让我的小demo能够运行起来，经过我的多次失败的尝试，总
复制链接

扫一扫

专栏目录