React Router 根本不渲染组件

Question

如果我直接添加组件，组件可以正常渲染，但路由器不会渲染任何东西。我在每条路线上都得到一个空白页面，控制台或任何地方都没有错误。

我的App.js:

import React, { Component } from 'react';
import './pages/editor'
import './css/bootstrap.min.css';
import './App.css';
import Editor from './pages/editor';
import Preview from './pages/preview';
import Home from './pages/home';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

class App extends Component {

  render() {
    return(
      <Router>
        <div className="app-wrapper" id="App">
          <Switch>
            <Route path="/" exact componenet={Home} />
            <Route path="/editor" exact componenet={Editor} />
            <Route path="/preview" exact componenet={Preview} />
          </Switch>
        </div>
      </Router>

    )
  }

}

export default App;

除了编辑器之外，组件都是非常基本的。

preview.js:

import React, { Component } from 'react';

class Preview extends Component {
    render() {
        return(
            <div>Welcome to the preview page</div>
        )

    }
}

export default Preview;

home.js基本相同。不知道为什么这不起作用，这是我第一次使用 BrowserRouter。仍在学习反应，所以感谢您的帮助。

Answer 1

您的组件拼写不正确

<Route path="/" exact componenet={Home} />

应该是

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

React Router 根本不渲染组件

React Router not rendering components at all

javascript

reactjs

routing