Question

我是React的新手并尝试按照如何设置路由器的教程进行操作。但是，当我运行应用程序时，组件不会呈现，而HTML只是表示反应为空。

index.js：

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

App.js：

const App = () => (
 <div>
  <Main />
 </div>
)

export default App;

Main.js：

const Main = () => (
  <div>  
     <main>
        <h1>MAIN</h1>
        <Route exact path="/" component={Home}/>
    </main>
  </div>
)

export default Main;

Home.js：

class Home extends Component {

constructor() {
    super()
    console.log('home component');
}

render() {
    return (

        <div>
            <h1 className="wat">waaaat</h1>
        </div>
        )
  }
}


export default Home;

另外，我可以在React插件中看到chrome的路径，如下所示：http://imgur.com/a/LXuwC

修改

如果我放下它可以工作：

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

直接在App.js而不是Main元素。

React router v4 not rendering component

0 个答案: