Как перенаправить на другой компонент с URL-адресом в React

Question

Я новичок, чтобы отреагировать. Я хочу перенаправить на другой компонент вместе с некоторыми параметрами. На данный момент я визуализирую компонент-перехватчик из компонента приложения с помощью

App.tsx

<Hook region={this.state.region} loginUser={this.state.user.username}/>

Но теперь у меня есть homePage.tsx, где есть материальный компонент пользовательского интерфейса CardActionArea , Я хочу сделать весь компонент карты доступным для щелчка и перейти к компоненту Hook с URL-адресом "/ userinfo". Путь и данные реквизита (но параметры должны быть видны в URL-адресе) после нажатия на компонент Card.

Так в приложении .tsx, у меня есть

 <HomePage />

в HomePage.tsx,

      <Card className={classes.root}>
            <CardActionArea>

              <CardContent>
              UserInfo
              </CardContent>
            </CardActionArea>
      </Card>

Теперь, как вызвать компонент Hook после щелчка по компоненту карты в HomePage.tsx с url = "/ userinfo" и регион данных и имя пользователя. (Примечание: эти данные (регион, имя пользователя) не должны отображаться в URL-адресе)

Answer 1

App.tsx:

 <Router>
  <Route exact path="/"  component={HomePage} />

   <Route path="/userinfo"  render={props => <Hook {...this.props}  region={this.state.region} loginUser={this.state.user.username}/>} />

 </Router>

HomePage.tsx

<Link   to="/userinfo">
      <Card className={classes.root} >
            <CardActionArea>

              <CardContent>
              UserInfo
              </CardContent>
            </CardActionArea>
      </Card>
      </Link> 

Answer 2

Перенаправление на основе URL-адреса работает с библиотекой React Router (запустите npm install react-router-dom для установки). Это должно работать:

App.ts

function App() {
  // Wrap your HomePage inside a router to access history context
  return (
    <Router>
      <Route path="/" component={HomePage}/>
    </Router>
  );
}

HomePage.tsx

import {withRouter} from 'react-router-dom';


function HomePage(props) {
  const goTo: Function = (url: string) => {
    props.history.push(url);
  };

  return (
    <div>
      <Card className={classes.root} onClick={() => goTo("/userInfo")}>
        <CardActionArea>
          <CardContent>
            UserInfo
          </CardContent>
        </CardActionArea>
      </Card>

      <Router>
        <Route 
          path="/userInfo" 
          render={props => <Hook {...props} foo="bar"/>}
        />
      </Router>
    </div>
  );
}

// instead of export default HomePage;
export default withRouter(HomePage);

Некоторые пояснения:

Компонент Router в основном перебирает каждый дочерний Route. Каждый раз, когда текущий URL совпадает с опорой пути, он будет отображать данный компонент. Некоторый контекст маршрута будет впоследствии автоматически передан дочерним компонентам. Это позволяет данному дочернему компоненту изменять URL-адрес и при необходимости повторно отображать маршруты.

Домашняя страница заключена в маршрутизатор, поэтому он может управлять URL-адресом и обновлять визуализацию. Поскольку вы не указали контекст истории, все маршрутизаторы будут использовать один и тот же контекст по умолчанию. Теперь предположим, что ваш пользователь находится по адресу root URL "/". Домашняя страница отображается и отображается, как и компонент Card, но не Hook.

Метод onClick запускает локальную функцию goTo, которая в основном создает sh новую запись в истории вашего браузера (это обновите URL и обновите sh рендеринг). Теперь и «/», и «/ userInfo» соответствуют текущему URL-адресу (совпадение происходит, когда текущий URL-адрес начинается с адреса, указанного в пути).

Если вы хотите передать скрытые свойства, и эти свойства доступны родительским компонентом, затем используйте render prop вместо component. Это позволяет вам передать функциональный компонент в Route, к которому вы можете свободно добавлять и / или удалять реквизиты.

Итак, в этом примере я просто добавил опору foo в Hook, но вы можете сделать довольно здесь много всего, что вы хотите.

EDIT

Если вы не хотите, чтобы ваша HomePage и ваш Hook отображались одновременно, либо установите для пути HomePage другое значение (например, "/ home") или добавьте точную опору, например:

App.ts

function App() {
  // Wrap your HomePage inside a router to access history context
  return (
    <Router>
      <Route path="/" exact component={HomePage}/>
    </Router>
  );
}

Это приведет к точному совпадению, иначе не будет отображаться если URL не совсем "/"