React Router 不更新视图

Question

我开始使用 React，但在理解如何使 react-router 工作时遇到了问题。

在我的项目中，我创建了一个导出简单渲染函数的App.js 文件：

export default class App extends React.Component {
    render () {
        return <Router>
            <div>
                <Link to="/connected">Login</Link>
                <Link to="/">Home</Link>

                <Route path="/connected" component={Connected}/>
                <Route exact path="/" component={LoginPage}/>

            </div>
        </Router>
    }
}

当然，在文件的顶部，我导入了两个组件：Connected 和 LoginPage 以及一堆其他组件：

import React from 'react'

import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom'

import LoginPage from './pages/LoginPage'
import Connected from './pages/Connected'

我的组件很简单：

import React from 'react'

export default class LoginPage extends React.Component {

    render () {
        return  <div>
            Hello World 1
        </div>
    }
}

第二个组件几乎相同。

我的问题是：

当我单击<Link to="/">Home</Link> 时，页面没有更新为LoginPage 组件。但是如果我刷新页面，就会出现LoginPage 组件。如果我点击<Link to="/connected">Login</Link>，路由器不会更新页面，我还需要完全刷新页面才能显示正确的组件。

我做错了什么？您还需要哪些其他信息来帮助我解决问题？

Answer 1

将其复制到“Package.json”>“依赖项”："react-router": "^2.4.0",

那就npm install

完成后：

试试这个：

第一个组件（Routes，它是 App.jsx）（也许你需要更改导入的路由）

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, Redirect } from 'react-router';

import LoginPage from './pages/LoginPage'
import Connected from './pages/Connected'

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={LoginPage}/>
        <Route path="/connected" component={Connected}/>
    </Router>
    , document.getElementById('root')
);

第二个组件（首页）：

import React from 'react';
import { Link } from 'react-router';

export default class Home extends React.Component {
    render() {
        return(
            <div>
                <h1> This is HomePage </h1>
                <h3> Click to go HomePage </h3>
                <Link to="/">Home</Link>
                <h3> Click to go Connected </h3>
                <Link to="/connected">Connected</Link>
            </div>
        )
    }
}

第三个组件（已连接）：

import React from 'react';
import { Link } from 'react-router';

export default class Connected extends React.Component {
    render() {
        return(
            <div>
                <h1> This is ConnectedPage </h1>
                <h3> Click to go HomePage </h3>
                <Link to="/">Home</Link>
                <h3> Click to go Connected </h3>
                <Link to="/connected">Connected</Link>
            </div>
        )
    }
}