title: Conditional Routing and Conditional Rendering in ReactJS and React router
body: <p>I have a question, I tried looking online and couldn't find what I needed but that's probably because I couldn't word my question properly.</p>
  
  <p>I have a React project I'm putting together and I want to have user profile pages for people. Here is what I have so far.</p>
  
  <pre><code>&lt;Route path="/profile/:user" render={(routeProps) =&gt; (&lt;Profile {...routeProps} {...this.state} /&gt; )}/&gt;
  </code></pre>
  
  <p>This is in my index.js, to set the route for my profile pages for different users and the following is what I have for my profile page</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { NavLink } from 'react-router-dom';
  
  export class Profile extends React.Component{
      constructor(props){
          super(props);
          this.state={
              user: this.props.user,
              fullname: this.props.fullname,
              picture: this.props.picture
          };
      }
      render(){
          return(
              &lt;h1&gt;{this.state.fullname}&lt;/h1&gt;      
          );
      }
  }
  </code></pre>
  
  <p>Now the question I have is this. I want the profile page to only load and render the users full name if the URL matches the userID given by 'user' in the state</p>
  
  <p>in my index.js I have hardcoded user and fullname values to test this, they are set like this</p>
  
  <pre><code>constructor(props){
          super(props);
          this.state = {
              user:"AFC12345",
              fullname:"Bob Ross"
          };
  </code></pre>
  
  <p>I want to only have the Profile page rendered when I visit "<a href="http://localhost:8080/#/Profile/AFC12345" rel="nofollow noreferrer">http://localhost:8080/#/Profile/AFC12345</a>" currently it renders the profile page for any "Profile/xxxx" I go to.</p>