@evg_96

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

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

5a904efa619a4957803415.png5a904eff7f662884666467.png

Сейчас есть:
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>
    );
  }
}
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
Какой у вас роутер? Если четвертый, то должно быть так:
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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
Leningrad Media Санкт-Петербург
от 60 000 руб.
18 авг. 2018, в 01:10
17000 руб./за проект
17 авг. 2018, в 23:00
5500 руб./за проект