Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Router 4 Basics Going Further with Routing Navigating Routes Programmatically

Mike Lundahl
Mike Lundahl
13,510 Points
Posted by Mike Lundahl
Mike Lundahl
13,510 Points

history.push does not render new url

For some reason react doesn't render the new view for me. The URL changes in the url bar in the browser. But it's still stuck on the same view.

here's my code

Index

import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link  } from 'react-router-dom';   
import createHistory from 'history/createBrowserHistory';
import App from './containers/App'

const history = createHistory();

ReactDOM.render(

    <App history={history}/>
 ,
  document.getElementById('container-bl')
);

App

import React, { Component } from 'react';
import {render} from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import { Redirect } from 'react-router-dom';

//Components
import HeaderWrap from './Header';
import Login from '../components/login/Login'
import Footer from '../components/footer/Footer'
import Welcome from '../components/welcome/Welcome'

export default class App extends Component {

constructor(props) {
        super(props);

        this.state = {
            signIn: false
            };

        this.handleSubmit = this.handleSubmit.bind(this);
        }

handleSubmit() {

    console.log('submit fired');

    this.props.history.push('/welcome');
}

render() {

         return (

                <Router history={this.props.history} >
                 <div id="mainWrapper">
                     <HeaderWrap userData={userData} logout={this.logout} />
                        <Switch>
                            <Route path="/login" render={ (props) => (<Login signIn={this.handleSubmit} />)} />
                            <Route path="/welcome" render={ (props) => (<Welcome userData={userData} />)}/>
                        </Switch>
                     <Footer />
                 </div>
                </Router>                                                       

        )

    };
}

Login component

import React, { Component, PropTypes } from 'react';
import { BrowserRouter as Router, Route, NavLink  } from 'react-router-dom';
import { Redirect, Link } from 'react-router-dom';

export default class Login extends Component {
constructor(props) {
        super(props);

        this.state = {
            signIn: false
        };


render() {

        return (
            <div className="normalContentWrapper">
                    <div id="login">
                        <p id="login-section">
                            <br />
                            <div className="btn" onClick={this.props.signIn} >Log In!</div>
                        </p>
                        </div>
                        </div>

Any ideas what it could be?

1 Answer

Mike Lundahl
Mike Lundahl
13,510 Points
Mike Lundahl
Mike Lundahl
13,510 Points

I tried forceRefresh and that worked.. but it doesn't feel ideal as it refreshes the entire page. hmmm