Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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