Question

我让它在Index.JS中呈现第一个。但它返回一个没有错误的空白页面，我不知道我做错了什么？

我有小页面的内容和联系，只是为了导航时的内容。

  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;

Answer 1

您必须使用<Router></Router>组件包裹路线，而不是<Routes />：

import { Router, Route, IndexRoute, browserHistory } from 'react-router';

ReactDOM.render(
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <IndexRoute component={Home}/>
           <Route path="stuff" component={Stuff} />
          <Route path="contact" component={Contact} />
        </Route>
      </Router>,
      document.getElementById('root')
    );

React Router返回一个空白页面

1 个答案: