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>

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

1 个答案: