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

Question

刚升级到react-router-dom 4.0.0.我的所有组件都是常规class箭头或胖箭头.它们都是使用导出的export default ThatComponent.但我得到了这个:

未捕获的错误:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件.检查渲染方法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没有Match也没有Miss.你只需要使用Route.此外,您需要安装和导入 react-router-dom要使用的包BrowserRouter(请参阅React Router文档).

要使您的示例使用最少的更改,您需要执行以下操作:

// 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>
);

请查看React Router文档中的NoMatchExample,了解如何使用和何时使用Switch.