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

Question

[evg_96]

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



Сейчас есть:
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>
    );
  }
}

Answer 1

[Максим]

Какой у вас роутер? Если четвертый, то должно быть так:

class App extends React.Component {
  render() {
    return (
      <div>
       <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/signup' component={Registration} />
          <Route component={NoMatch} /> {/* для всех остальных адресов */}
        </Switch>
      </div>
    );
  }
}

Чтобы на эту страницу попасть, нужно использовать вместо <a> компонент из RR - <Link to='registration'>Регистрация</Link>

То есть вы внутри switch выбираете, что показывать! Значит вам еще нужно сделать компонент Home в котором уже разместить кнопку на регистрацию:

<Link to="/signup" className="btn btn-warning">Регистрация</Link>