Link问题，导致登陆失败

Question

头部引入了这些：

import React from "react";

import ReactDOM from 'react-dom';

import { HashRouter } from 'react-router-dom';

import {hashHistory} from "React-router";

import {

    BrowserRouter as Router,

    Route,

    Link

} from 'react-router-dom';

但还是报错Link，history的错误，查了老师的博客，也试了好多次都没有改过来.

关于版本的问题发现好多同学都在问，大家有没有什么明确的解决方案，感觉因为这个花费了好多时间。。

Answer 1

ZZ辉 2017-05-10 08:59:22

<Router>
  <Link target="_blank" to="路径">
    <Button type="dashed" htmlType="button">个人中心</Button>&nbsp;&nbsp;
  </Link>
</Router>

这样好像可以。

• 提问者 行走的指尖 #1

  import React from "react";
  import ReactDOM from 'react-dom';
  import { HashRouter } from 'react-router-dom';
  import {
      BrowserRouter as Router,
      Route,
      Link
  } from 'react-router-dom';
  
  你引入的是这些吗？

• ZZ辉 回复 提问者 行走的指尖 #2

  是的，不过我只引入了import React from 'react';
  import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

• xy36 #3

  我版本改为react-router4了，内容也按照课程20章改了可是还是报同样的错误。请问你们是怎么解决的？

Answer 2

Parry 2017-05-10 10:58:03

4 的版本更新我看怎么来更新给大家。不行我就先写博客分享给你们。

此 React 课程学习遇到的常见问题以及没有审核通过的补充视频（如打包后的文件压缩、单独的 webpack 2 视频教程等）可以参考我博客的整理。

我的博文地址：http://blog.parryqiu.com/2017/03/09/react-q-and-a/

目前文章主要包含了以下问题的解决方案

•  一些课程资源

• webpack-dev-server

• React Developer Tool 的问题

•  缺少 react-html-attrs 插件

• babel-loader 没加载的错误

• fetch

• 占用端口 8080 的问题

• The root route must render a single element 的处理

• 如何在chrome console 中打开 paint flashing

• 父组件通过 refs 获取子组件真实 DOM 节点的问题

• 跳转 Route 的问题

• 将 AntDesign 中的 getFieldProps 替换成 getFieldDecorator

• Target container is not a DOM element

• 慕课没有发布的更新课程

• React Router 4.0 中 location undefined 的问题

• AntDesign 文档中的函数语法错误

• 解决 webpack-dev-server 不能自动刷新的问题

• 解决课程中 React Router 版本的差异问题

• 提问者 行走的指尖 #1

  好的，谢谢老师

Answer 3

Parry 2017-05-08 15:28:56

版本 4 中取消了 hashHistory ，建议安装课程一样的 2.0 版本。

• ZZ辉 #1

  请问使用版本4应该如何解决？

Answer 4

ZZ辉 2017-05-11 10:50:39

又看了几节课之后，发现使用HashRouter才是正确的，如果使用BrowserRouter的话，在页面跳转到详情页时是空白。具体如下：

在pc_news_block中引入

import {HashRouter,Link} from 'react-router-dom';

然后render方法return

<div className="topNewsList">
  <Card>
    <HashRouter>
      <ul>
        {newsList}
      </ul>
    </HashRouter>
  </Card>
</div>

移动端类似。

• 提问者 行走的指尖 #1

  我改好了，用hashRouter还是不行，就先用下面的方法了，经过测试好像是Link必须加 to="" 属性。
  引入:
  import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
  代码：
  <Router>
  	<Link to="" target="_blank">
  		<Button type="dashed" htmlType="button">个人中心</Button>
  	</Link>
  </Router>

• ZZ辉 回复 提问者 行走的指尖 #2

  是的，to=""是必须的。不过还是建议用HashRouter，在后面几节BrowserRouter可能就不行了。<Link>都要用<HashRouter>包裹。