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

将其复制到＆＃39; Package.json＆＃39; ＆GT; ＆＃39;依赖＆＃39;："react-router": "^2.4.0",

然后执行npm install

完成后：

试试这个：

第一个组件（路线，它是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>
        )
    }
}

React Router不会更新View

1 个答案: