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

Question

我对 React 很陌生。我试图让基本路由与react-router-dom（v.4.0.0）一起使用，但我无法让链接标签工作。 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>