Question

在运行应用程序时，我得到一个没有错误的空白显示。它不会路由到root或主页。有人可以帮助我，因为这是我第一次尝试反应路线。

以下是我的代码：

index.js

var React=require('react');
import {render} from 'react-dom';
import {BrowserRouter, Route} from 'react-router-dom';
import {IndexRoute} from 'react-router';
import {Header} from './components/Header';
import {Home} from './components/Home';
import {Root} from './components/Root';


class App extends React.Component{
  render(){
    return(
      <BrowserRouter>
        <Route path={"/"} component={Root}>
          <IndexRoute component={Home}/>
        </Route>
      </BrowserRouter>
    );
  }
}

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

Root.js

var React=require('react');

import {Header} from "./Header";
import {Home} from "./Home";

class Root extends React.Component{
render(){
  return(
    <div>
      {this.props.children}
    </div>);
  }
}

Home.js

import React from "react";

export class Home extends React.Component{

  render(){
    return(
      <div id="test">
        <p>
          This is a new app. testing
        </p>
      </div>
    );
  }
}

Answer 1

尝试在整个index.js文件内容上粘贴此内容。

// React.
import React from 'react'

// DOM.
import ReactDOM from 'react-dom'

// React Router DOM.
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom'

// Root.
import {
  Root
} from './components/Root';

// Home.
import {
  Home
} from './components/Home';

// Render.
ReactDOM.render(
  <Router>
    <Root>
      <Switch>
        <Route path="/" component={Home} exact/>
      </Switch>
    </Root>
  </Router>
, document.querySelector('#app'))

我个人会使用import全面导入，而不是require。你似乎有两种策略的奇怪组合。

此外，您的Root.js文件似乎没有export声明。

最后，由于网站目前处于关闭状态，我无法确认，但我感觉由于React Router v4组件现在都是从'react-router-dom'而不是'react-router'导入的。 <IndexRoute/>可能不再是一件事。

React Routing无效（在运行的应用程序上显示空白页）

1 个答案: