react-router-dom 链接标签不起作用

Question

我对 React 很陌生。我试图让基本路由与 react-router-dom (v.4.0.0) 一起工作，但我无法让 Link 标签工作。 URL 发生更改，但链接到的组件未呈现。控制台中没有错误。任何帮助将非常感激。

这是我的代码。

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import {BrowserRouter, Route, Link} from 'react-router-dom';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

class First extends Component {
  render() {
    return (<div>First</div>);
  }
}

class Second extends Component {
  render() {
    return (<div>Second</div>);
  }
}

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <div>
          <p>Welcome</p>
          <Link to="/first">1</Link>
          <Link to="/second">2</Link>
        </div>
        <Route path="/first" component={First} />
        <Route path="/second" component={Second} />
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

谢谢。

Answer 1

同时添加基本路线：

<BrowserRouter>
  <div>
    <Route path="/" component={() => (
      <div>
        <p>Welcome</p>
        <Link to="/first">1</Link>
        <Link to="/second">2</Link>
      </div>
    )} />
    <Route path="/first" component={First} />
    <Route path="/second" component={Second} />
  </div>
</BrowserRouter>