index.js中的react-router-dom用法

Question

在我的index.js文件中：

import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import App from './App';
import Contact from './Contact';

import ReactDOM from 'react-dom';
//import RouterMapping from './RouterMapping';
const RouterMapping = () => (
  <Router>
    <Route exact path='/' component={App} />
    <Route path='/contact' component={Contact} />

  </Router>
);

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

渲染页面/时，它不显示任何内容（根据我的理解，应该转到App组件。如果我替换，App组件本身正常运行：

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

到

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

我做了一些根本错误的事吗？新手反应......

3月16日更新

我想我想出了如何使路由器工作。

我已将RouterMapping重构为RoutingConfig，如下所示：

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

import Home from './Home';
import Contact from './Contact';

const RoutingConfig = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home}/>
      <Route path="/contact" component={Contact}/>
    </div>
  </Router>
);

export default RoutingConfig;

没什么特别的。

现在，我仍然在我的RoutingConfig中呈现index.js组件，而不是在App中呈现index.js：

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

路由映射现在在App.js：

中完成

class App extends Component {
  render() {
    return (
      <RoutingConfig />
    );
  }
}

现在它有效。请参阅随附的屏幕截图：

我的解释

我认为这里的关键是将RoutingConfig降级为App.js。从index.js呈现App.js开始，App.js将充当整个应用的入口点，并根据路由确定要加载的组件（Home，Contact） 。

以上是您的信息，希望它有所帮助。