React Router组件Props不支持<Link />？代码报错原因排查

嘿，我来帮你搞定这两个React Router的问题：

问题1：React Router组件的props是否无法接收<Link />组件？ #

当然不是啦！组件的props完全可以接收<Link />元素，只要你正确传递和使用就行。举个例子，你可以把<Link />作为props的值传给子组件：

// 父组件
<Sidebar navLink={<Link to="/dashboard">Dashboard</Link>} />

// 子组件Sidebar
const Sidebar = ({ navLink }) => {
  return <div className="sidebar-item">{navLink}</div>;
};

这里要理清一个误区：Route组件默认会给渲染的组件传递路由相关的props（比如match、location、history），但这并不影响你额外传递包括<Link />在内的任何React元素或数据作为props。只要传递方式正确，组件完全可以接收并渲染<Link />。

问题2：代码报错"Element type is invalid: expected a string..." #

这个报错的原因非常明确：你导入的Link是undefined！

为什么会这样？因为<Link />是浏览器环境专属的路由组件，它属于react-router-dom包，而不是核心的react-router包。react-router只提供了基础的路由逻辑，并没有包含Link、BrowserRouter这些面向浏览器的UI组件。

你当前的导入语句是：

import { Switch, Route, Link } from 'react-router'

这时候从react-router里根本拿不到Link，所以它的值是undefined。当你在组件里尝试渲染<Link />时，React就会抛出错误，说“得到了undefined，不是有效的组件类型”。而当你只返回<div> Home </div>时，没有用到这个无效的Link，所以代码就能正常运行。

解决步骤： #

1. 修改导入语句，从react-router-dom导入所需组件：

import { Switch, Route, Link } from 'react-router-dom'

2. 确保你的项目已经安装了react-router-dom（如果没装，执行下面的命令）：

npm install react-router-dom
# 或者用yarn
yarn add react-router-dom

3. 别忘了用BrowserRouter（或HashRouter）包裹整个路由应用，这是React Router在浏览器环境下运行的必要条件：

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    {/* 你的所有路由组件都要放在这里面 */}
    <Route path='/' component={() => { 
      return ( 
        <div> 
          <Link to='/'>Home</Link> 
          <Link to='/users'>Users</Link> 
        </div> 
      ) 
    }} />
  </Router>,
  document.getElementById('root')
);

内容的提问来源于stack exchange，提问作者Jamie Aden