Question

我试图在反应中实现路由。这是我的index.js文件

import React from 'react';
import {render} from 'react-dom';
import { BrowserRouter,Route, Switch, withRouter,Redirect } from 'react-router-dom';
import {Home} from './components/Home.jsx';
import {AddUser} from './components/AddUser.jsx';

class App extends React.Component {
 render() {
    return(
        <BrowserRouter>
            <Switch>
                <Route path="/" exact render={() => <Redirect to='/home' />} />
                <Route path="/home" exact component={Home} />
                <Route path="/adduser" exact component={AddUser} />                    
            </Switch>
        </BrowserRouter>
    );
 }
}

render(<App/>, document.getElementById('root'));

这是我的家庭组件文件

import React from 'react';

export default class Home extends React.Component {
constructor() {
    super();
    this.state = {
        users : []
    }
}

  render() {
   return (
    <div>hello</div>
   );
 }
}

应用程序按预期重定向，但组件未加载。控制台中没有错误，我可以找到各种反应路由的例子，其中大多数都是以前的路由器版本。

请帮助我理解这个问题。提前致谢

Answer 1

导入default导出时请勿使用{}

因此，由于您将组件导出为default，因此您应该使用

import Home from './components/Home.jsx';
import AddUser from './components/AddUser.jsx';

演示https://codesandbox.io/s/5wqx9x2724

一般情况下，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

组件未在响应路由中加载

1 个答案: