在 React Router v4 中获取未定义的组件

Question

刚刚升级到 react-router-dom 4.0.0。我所有的组件都是常规 classes 或粗箭头。它们都是使用 export default ThatComponent 导出的。然而我得到了这个：

未捕获错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。 您可能忘记从定义组件的文件中导出组件。检查 Router.

的渲染方法

// minimal showcase
import { BrowserRouter, Match, Miss } from 'react-router';

const Router = () => (
  <BrowserRouter>
    <div>
      {/* both Match and Miss components below cause an error */}
      <Match exactly pattern="/login" component={Login} /> 
      <Match exactly pattern="/frontpage" component={Frontpage} />
      <Match exactly pattern="/logout" render={() => (<div>logout</div>)} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
);

为什么 <Match> 组件认为其他组件未定义？

Answer 1

在这里检查react-router的来源：https://unpkg.com/react-router@4.0.0/index.js（also https://unpkg.com/react-router-dom@4.0.0/index.js），它下面没有Match。匹配可能属于其他包。

Answer 2

在 react-router 的最终版本中没有 Match 也没有 Miss。你只需要使用 Route。此外，您需要安装并导入 react-router-dom 包才能使用BrowserRouter（参见React Router documentation）。

要使您的示例只需进行最少的更改，您需要执行以下操作：

// minimal showcase
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/login" component={Login} /> 
            <Route exact path="/frontpage" component={Frontpage} />
            <Route exact path="/logout" render={() => (<div>logout</div>)} />
            <Route component={NoMatch} />
        </Switch>
    </BrowserRouter>
);

请查看 NoMatchExample in React Router docs 了解如何以及何时使用 Switch。

在 React Router v4 中获取未定义的组件

Getting undefined components in React Router v4

javascript

reactjs

react-router

react-router-dom