CODEWITHSUNDEEP
javascriptreactjsroutesreact-router
Jose
Jose

Reputation: 2289

React Router 4 <Link> tag updates URL but component is not being rendered to the page

I'm trying to set up login functionality for my react app. Once the user lands on the Login page it has a button on the bottom saying "Sign up". When I click on that link it updates the URL properly and says "/register" in the URL but the Register Component is not rendering. In more traditional routing I would set up a route config that would dictate where all the routes go but from my understanding react router 4 is moving away from that. From reading the docs and some examples I figured simply putting Route path="/register" component={Register} would be enough to tell the Link tag what component to render but that does not seem to be the case. I am using "react-router": "^4.2.0"

Login.js 

import React from 'react';
import LoginForm from '../components/LoginForm';

const Login = () => (
  <div>
    <LoginForm></LoginForm>
  </div>
);

export default Login;

LoginForm.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import { Link, Route } from 'react-router-dom';
import Register from "../pages/Register";

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: ''
    }
  }

  onSubmit(e) {
    e.preventDefault();

    this.setState({
      error: 'Something went wrong.'
    })
  }

  render() {
    return (
      <form>
        { this.state.error ? <p>{this.state.error}</p> : undefined }
        <TextField type="email" name="email" hintText="Email" fullWidth={true} />
        <TextField type="password" name="password" hintText="Password" fullWidth={true} />
        <RaisedButton label="Login" primary={true} style={buttonStyles} onClick={this.onSubmit.bind(this)} />
        <p style={text}>No account?<Link to="/register"> Sign up</Link></p>

        <Route path="/register" component={Register}></Route>
      </form>
    )
  }
}

export default LoginForm;

Register.js

import React from 'react';
import RegisterForm from '../components/RegisterForm';

const Register = () => (
    <div>
        <RegisterForm></RegisterForm>
    </div>
);

export default Register;

RegisterForm.js 

import React, { Component } from 'react';
import { render } from 'react-dom';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import { Link } from 'react-router-dom';

class RegisterForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: ''
        }
    }

    onSubmit(e) {
        e.preventDefault();

        this.setState({
            error: 'Something went wrong.'
        })
    }

    render() {
        return (
            <form>
                { this.state.error ? <p>{this.state.error}</p> : undefined }
                <TextField type="name" name="name" hintText="Name" fullWidth={true} />
                <TextField type="email" name="email" hintText="Email" fullWidth={true} />
                <TextField type="password" name="password" hintText="Password" fullWidth={true} />
                <RaisedButton label="Register" primary={true} onClick={this.onSubmit.bind(this)} />
            </form>
        )
    }
}

export default RegisterForm;

Upvotes: 0

Views: 1449

Answers (2)

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

You should specified register path in your router like <Route path="/register" component={YourComponent} />

<Switch>
   <Route exact path="/" component={Root} />
   <Route path="/register" component={Register} />
</Switch>

Upvotes: 0

Jose
Jose

Reputation: 2289

Turns out that route tag needed to be inside of my main navigation component and not inside of the LoginForm.js component. I had not included it in my main navigation since you can't get to the register page from the main navigation so why would it need to be declared there?? I thought I would need to dynamically create it by adding it to my LoginForm.js component.

<Route path="/register" component={Register} />

Upvotes: 0

Related Questions