は、私がabove.But URLとしてメソッドを呼び出して、これらのページが変更されますが、ページは、いくつかの解決策を探しloading.iされていないルートに望んでいたと私は、その後、ルーティングが

Question

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import Register from './register/register'; 
import Login from './login/login'; 
import { 
    BrowserRouter as Router, 
    Route, 
    NavLink 
} from 'react-router-dom'; 
import createBrowserHistory from 'history/createBrowserHistory' 
const history = createBrowserHistory() 


class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.login = this.login.bind(this); 
    this.register = this.register.bind(this); 
    } 
    login() { 
    history.push('/') 
    } 
    register() { 
    history.push('/login') 
    } 
    render() { 
    return (
     <Router> 
     <div> 

      <button onClick={this.login}>Login</button> 
      <button onClick={this.register}>register</button> 


      <Route exact path='/' component={Register} /> 
      <Route path='/login' component={Login} /> 
     </div> 
     </Router> 

    ); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('root')); 

私はログインの2つのページを持っているし、登録を動作していないリアクトそれは働いていないけど、私はあなたがルータにhistoryをバインドするために忘れてしまったと思うcode.Thankあなた

Answer 1

と間違っているかどうか確認してください：

<Router history={history}> 
    ... 
</Router> 

Answer 2

あなたがに小道具として歴史を提供するために、withRouter HOCを利用することができますコンポーネントを使用して、を使用することができます

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.login = this.login.bind(this); 
    this.register = this.register.bind(this); 
    } 
    login() { 
    this.props.history.push('/') 
    } 
    register() { 
    this.props.history.push('/login') 
    } 
    render() { 
    return (
     <Router> 
     <div> 

      <button onClick={this.login}>Login</button> 
      <button onClick={this.register}>register</button> 


      <Route exact path='/' component={Register} /> 
      <Route path='/login' component={Login} /> 
     </div> 
     </Router> 

    ); 
    } 
} 

const App = withRouter(App); 

ReactDOM.render(<App />, document.getElementById('root')); 

Answer 3

まず一つは、あなたが、その後

<Router history={history}> 
    ... 
</Router> 

このコードmodule.exportsはモジュール内

devServer: { 
historyApiFallback: true, 
contentBase: './' } 

を持つあなたのWebPACKの設定ファイルに確認してくださいあなたの結合操作を逃しています。

ハッピーコーディング!!!!