美文网首页
react 踩过的坑

react 踩过的坑

作者: 木安小学生 | 来源:发表于2019-02-14 14:03 被阅读0次

使用路由 提示 'Link' is not exported from 'react-router'

源代码如下

import React from 'react';
import { Router, Route, Link } from 'react-router'

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

const About = React.createClass({
  render() {
    return <h3>About</h3>
  }
})

const Inbox = React.createClass({
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
})

const Message = React.createClass({
  render() {
    return <h3>Message {this.props.params.id}</h3>
  }
})

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

出错原因:通常在 React 中,一般要引入两个包,react和 react-dom,那么react-router和react-router-dom不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件,因此只需引用react-router-dom这个包就OK了

相关文章

  • react 踩过的坑

    使用路由 提示 'Link' is not exported from 'react-router' 源代码如下 ...

  • React Native踩过的坑。。。

    1.》》》执行react-native run-ios 报错 我的操作过程就是:react-native init...

  • React Native踩过的坑

    啊,从android开始接触react native,之前对JS了解并不多,所以一路走来跌跌撞撞,任何一个小坑都能...

  • 我的前端笔记

    目录 react 小程序 vue typescript 经验(踩坑) react useMemo 和 useCal...

  • 交互设计师所要避免的几个坑

    前言 工作中难免会踩到几个坑,即使现在不踩以后还会踩,只有踩过才会深刻记住,踩过说明爱过!但是踩过的坑必须把坑填满...

  • React Native Install(踩过的坑)

    参考安装流程:React Native中文文档 一、基本安装流程我的安装是 Windows x64 版本,用于开发...

  • react 我所踩过的坑

    ToDoList是我学习react的开始,对于列表组件,我进行的组件封装是这样的层次: TodoitemList—...

  • 初学react之踩过的坑

    最近没事学习了下react,虽然只是简单的接触下,但还是碰到不少问题 问题1:路由的active状态 文档上写的是...

  • React-native 踩过的坑

    Failure to call AppRegistry.registerComponent 1、首先确认你的ind...

  • react-native踩过的坑

    React-native 1.Text文本中插入图片:View用弹性布局 ...

网友评论

      本文标题:react 踩过的坑

      本文链接:https://www.haomeiwen.com/subject/tlreeqtx.html