ReactでのURLの変更

Question

私はReactを始め、現在このチュートリアルをYoutubeで利用しています。 https://www.youtube.com/watch?v=5Bytq6LNDO4&t=599s 私はReact-Routerのv4を使用していますので、いくつか変更する必要があります。

私のコードでは、私はナビゲーションバーにあるボタンを押すと、URLが変更されていますが、異なる成分の含有量がレンダリング得ることはありませんが：/

ここでは私のコードは次のとおりです。

店。 JS

import { compose, createStore, applyMiddleware } from 'redux'; 
import { createBrowserHistory } from 'history'; 
import { syncHistoryWithStore } from 'react-router-redux'; 
import { createLogger } from 'redux-logger'; 
import rootReducer from './reducers'; 

const middleware = [ 
    createLogger() 
]; 

const enhancers = compose(
    applyMiddleware(...middleware), 
    window.devToolsExtension ? window.devToolsExtension() : f => f 
); 

/** 
* CREATE STORE 
*/ 
const store = createStore(
    rootReducer, 
    {}, 
    enhancers 
); 

export const history = syncHistoryWithStore(createBrowserHistory(), store); 

export { store }; 

Routes.js

import React from 'react'; 
import {Router, Route } from 'react-router'; 
import { HomeView, Login, SignUp } from './modules'; 
import { history } from './redux/store'; 
import App from './App'; 

export default() => (
<Router history={history}> 
    <div> 
    <Route path="/" component={App} /> 
    <Route exact path="/" component={HomeView} /> 
    <Route path="/login" component={Login} /> 
    <Route path="/signup" component={SignUp} /> 
    </div> 

</Router> 
); 

Navbar.js

import React from 'react'; 
import {Menu} from 'semantic-ui-react'; 
import { createBrowserHistory } from 'history'; 
import logo from '../../logo.png'; 
import './style.css' 

const history = createBrowserHistory(); 

const NavBar =() => (
    <Menu> 
    <Menu.Menu> 
     <Menu.Item> 
     My full feature <img src={logo} alt="logo" className="NavBar-logo"/> 
     </Menu.Item> 
    </Menu.Menu> 

    <Menu.Menu position="right"> 
     <Menu.Item onClick={() => history.push('/signup')}> 
     Sign Up 
     </Menu.Item> 
     <Menu.Item onClick={() => history.push('/login')}> 
     Login 
     </Menu.Item> 
    </Menu.Menu> 

    </Menu> 
); 

export default NavBar; 

App.js

import React, { Component } from 'react'; 
import {NavBar} from './modules'; 

import './App.css'; 

const App =() => (
    <div> 
    <NavBar /> 
    </div> 
); 

export default App; 

Answer 1

やったときにあなただけのReduxのrouting減速を更新している：

<Menu.Item onClick={() => history.push('/signup')}>

を使用すると、UIは実際にあなたを変更したい場合は、それを接続することができどちらか〜routing.locationBeforeTransition.pathname還元性特性

または

このようなreact-routerに固執：

import { Link } from 'react-router'; 

<Menu.Item> 
    <Link to="/signup">Sign Up</Link> 
</Menu.Item> 

Answer 2

は、だから私は解決策を見つけた：Routes.jsですべての まず、私は、ブラウザの履歴を作成するために、関数を呼び出す必要があります：

import React from 'react'; 
import {Router, Route } from 'react-router'; 
import { HomeView, Login, SignUp } from './modules'; 
import { createBrowserHistory } from 'history'; 
import App from './App'; 

const history = createBrowserHistory(); 

export default() => (
<Router history={history}> 
    <div> 
    <Route path="/" component={App} /> 
    <Route exact path="/" component={HomeView} /> 
    <Route path="/login" component={Login} /> 
    <Route path="/signup" component={SignUp} /> 
    </div> 

</Router> 
); 

そして、NavBar.js：

import React from 'react'; 
import {Menu} from 'semantic-ui-react'; 
import { createBrowserHistory } from 'history'; 
import { withRouter } from 'react-router'; 
import logo from '../../logo.png'; 
import './style.css' 

const history = createBrowserHistory(); 

const NavBar = withRouter(({history}) => (
    <Menu> 
    <Menu.Menu> 
     <Menu.Item> 
     My full feature <img src={logo} alt="logo" className="NavBar-logo"/> 
     </Menu.Item> 
    </Menu.Menu> 

    <Menu.Menu position="right"> 
     <Menu.Item onClick={() => history.push('/signup')}> 
     Sign Up 
     </Menu.Item> 
     <Menu.Item onClick={() => history.push('/login')}> 
     Login 
     </Menu.Item> 
    </Menu.Menu> 

    </Menu> 
)); 

export default NavBar; 

これは多くの助けを受けました：Programmatically navigate using react router