React Link不更新视图

时间:2017-06-16 14:38:50

标签: reactjs react-router

我遇到了路由器的问题。基本上,如果我通过网址直接导航到路由,在我的情况下:

http://localhost:3000/about

我确实将about组件加载到视图中。

但是,如果我点击主页上的“约”链接,则URL会发生变化,但视图不会发生变化。 about组件没有加载。



//App.js
import React, {Component} from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link as RouterLink,
} from 'react-router-dom'
import Nav from  './Nav';
import About from './About';

class App extends Component {
  render() {
    return (
      <Router>
        <Nav />
        <hr />
        <Route exact path="/" component={this.Home} />
        <Route path="/about" component={About}/>
      </Router>
    );
  }

  Home = () => (
    <div>Home</div>
  )
}

export default App;

//Nav.js
import React, {Component} from 'react';
import {
  Link as RouterLink
} from 'react-router-dom'


export default class Nav extends Component {
  render() {
    return (
      <div><RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink></div>
    );
  }
}

//About.js
import React, {Component} from 'react';

export default class About extends Component {
  render() {
    return (
     <div>About</div>
    );
  }
}
&#13;
&#13;
&#13;

0 个答案:

没有答案