Как сделать ссылку на страницу с компонентом в react-router?

Как сделать ссылку например кнопку "Регистрация", чтобы при нажатии на нее менялся адрес и рендерилась другая страница с формой?
На данный момент на главной странице есть кнопка Регистрация, при нажатии на которой рендерится компонент формы. Меняется адрес, но страница по сути остается таже самая, с теми же компонентами. А как сделать чтобы при нажатии рендерилась другая страница с этим компонентом?



Сейчас есть:
SignUpPage

class SignUpPage extends React.Component {
  constructor() {
    super();

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

  handleSignUp({ email, password }) {
    this.props.signUp(email, password);
  }

  render() {
    return (
      <div>
        <SignUpForm onSubmit={this.handleSignUp} />
      </div>
    );
  }
}

export default connect(
  null,
  {
    signUp
  }
)(SignUpPage);

SignUpForm

class SignUpForm extends React.Component {
  render() {
    const { handleSubmit } = this.props;

    return (
      <div>
        <h2>Регистрация</h2>
        <form onSubmit={handleSubmit}>
          <Field name="email" component={ErrorField} />
          <Field name="password" component={ErrorField} type="password" />
          <div>
            <input type="submit" className="btn btn-primary"/>
          </div>
        </form>
      </div>
    );
  }
}

App

class App extends React.Component {
  render() {
    return (
      <div>
        <NavLink to="/signup" className="btn btn-warning">Регистрация</NavLink>
        <Route path="/signup" component={SignUpPage} />
      </div>
    );
  }
}