2
我在Index.JS中渲染了第一個。但它返回一個沒有錯誤的空白頁面,我不知道我在做什麼錯誤?React路由器返回空白頁
我有小頁面的內容和聯繫人只是爲了瀏覽時的內容。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import Home from './home';
import Stuff from './stuff';
import Contact from './contact';
var ReactRouter = require('react-router');
var Route = ReactRouter.Route;
var Routes = ReactRouter.Routes;
var IndexRoute = ReactRouter.IndexRoute;
ReactDOM.render(
<Routes>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="stuff" component={Stuff} />
<Route path="contact" component={Contact} />
</Route>
</Routes>,
document.getElementById('root')
);
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Alert from 'react-s-alert';
import 'react-s-alert/dist/s-alert-default.css';
import 'react-s-alert/dist/s-alert-css-effects/bouncyflip.css';
import Modal from 'react-awesome-modal';
import Examples from './modal';
import Home from './home';
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
<ul className="nav">
<li><Link to = "/">Home</Link></li>
<li><Link to = "/stuff">Stuff</Link></li>
<li><Link to = "/contact">Contact</Link></li>
</ul>
<div className="content">
{this.props.children}
</div>
</div>
export default App;
你可能要考慮粘貼代碼更好的......例如給不同的文件不同的名稱等等。它讓人更容易嘗試。 – mfirry