CODEWITHSUNDEEP
reactjsreact-router-v4
Uli28
Uli28

Reputation: 1

Handle URL changes in React

I am new to React and currently taking this tutorial on Youtube. https://www.youtube.com/watch?v=5Bytq6LNDO4&t=599s I am using v4 of React-Router so i have to change a few things.

At my code, the url is changing when I press the buttons at the NavBar, but the content of the different Components won't get rendered :/

Here is my Code:

Store.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;

Upvotes: 0

Views: 3045

Answers (2)

Uli28
Uli28

Reputation: 1

So i found a solution: First of all at Routes.js, I have to call the function to create Browser History:

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>
);

And at 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;

This helped a lot: Programmatically navigate using react router

Upvotes: 0

Daniel
Daniel

Reputation: 6491

You're just updating redux routing reducer when doing:

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

If you want the UI to actually change you could either connect it to routing.locationBeforeTransition.pathname redux property

Or

Stick with react-router like this:

import { Link } from 'react-router';

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

Upvotes: 2

Related Questions