Question

我的路线未加载我的组件。不知道什么不能正常工作。如果我尝试使用其他组件，则效果很好，但不适用于此组件。

// routes.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route,Switch } from 'react-router-dom'
import { Meteor } from 'meteor/meteor';
import { RecoverPassword } from '../../ui/pages/recover-password';

Meteor.startup(() => {
ReactDOM.render((
<BrowserRouter>
    <Switch>
       <Route exect path="/" component={ RecoverPassword }/>
    </Switch>
 </BrowserRouter>
 ),
 document.getElementById('react-root')
);

// recoverpassword.js

import React from 'react';
export default class RecoverPassword extends React.Component {
constructor(props){
    super(props);
    console.log('hi');
}
render() {
  return(
    <h1>Hello</h1>
    );
  }
}

Answer 1

您输入的是错字错误，而不是确切的

更改

  <Route exect path="/" component={ RecoverPassword }/>

收件人

 <Route exact path="/" component={ RecoverPassword }/>

此外，由于您将RecoverPassword组件导出为默认组件，因此您需要以类似方式导入

  import RecoverPassword from '../../ui/pages/recover-password';

如果仅使用无默认值的导出，则可以像

一样导入组件

 import { RecoverPassword } from '../../ui/pages/recover-password';

如果您不使用React v16，也可以使用div或span括起来返回jsx元素

   import React from 'react';
   export default class RecoverPassword extends React.Component {
   constructor(props){
       super(props);
       console.log('hi');
    }
    render() {
       return(
       <div>
          <h1>Hello</h1>
       </div>
     );
  }

如果您使用的是React v16，则将jsx元素放在React.Fragment中

   import React from 'react';
   export default class RecoverPassword extends React.Component {
   constructor(props){
       super(props);
       console.log('hi');
    }
    render() {
       return(
       <React.Fragment>
          <h1>Hello</h1>
       </React.Fragment>
     );
  }

Answer 2

在Route exact的错字旁，

您要导出默认模块：

export default class RecoverPassword ...

但是将其作为命名导出进行导入：

import { RecoverPassword } from '../../ui/pages/recover-password';

您应该将其默认导入，因此将其更改为此（无花括号）：

import RecoverPassword from '../../ui/pages/recover-password';

您可以了解有关here和here出口和进口的更多信息

路线未加载组件

2 个答案: