Как перенаправить на домашнюю страницу после рендеринга компонента Header в React?

Question

Я создал «заголовок», который получает все меню и его содержимое из внутреннего приложения.

Заголовок. js

 {getMenus.map(getMenu => (
            <Button
              key={getMenu.name}
              variant="text"
              color="inherit"
            >
              <Link
                style={{ textDecoration: "none", color: "white" }}
                // to={getMenu.link}
                to={getMenu.link.concat(
                  getMenu.link === "/" ? "" : "/",
                  getMenu.id
                )}
              >
                {getMenu.name}
              </Link>
            </Button>
          ))}

getMenus список меню, которое будет отображаться в заголовке. Я использовал реагирующий маршрутизатор для отображения соответствующего содержимого меню.

Приложение. js

<Router>
      <div className="App">
        <Header />

        <Switch>
          <Route path="/:id" exact component={Home} />
          <Route path="/hello/:id" exact component={Hello} />
        <Switch>

       <Footer>
     </div>
</Router>

Когда я запускаю свое приложение реагирования Я вижу пустое пространство в средней части, потому что я не нажал ни на одно меню. Как отобразить компонент Home, когда я запускаю приложение реагировать?

Answer 1

Помогла бы в предоставлении динамического c ID, а также

    < Redirect to={`/hello/${id}`} />

Answer 2

В заголовке. js, как только вызов API завершен, вызовите this.props.history.push('/home/{id}'), чтобы загрузить страницу с идентификатором из вызова.

Пример в компоненте на основе класса:

class MyComp extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        apiCall().then(id => {
            this.props.history.push('/hello/' + id);
        })
    }

    render() {
        return(
            null
        );
    }
}

Дополнительная информация по props.history.

https://reacttraining.com/react-router/web/api/history