Свойство Reactrouter Match

Question

У меня есть функциональный компонент, который принимает состояние от Redux в качестве реквизита.

    function Main(props){
      const { dishes, promotions, leaders, comments, resetFeedbackForm, postFeedback, fetchDishes, fetchComments, fetchPromos, fetchLeaders, postComment } = props
      useEffect(() => {
        fetchDishes();
        fetchComments();
        fetchPromos();
        fetchLeaders();
      },[]);

      return (
        <div>
          <div className="container">
          <Header />
            <Switch>
              <Route path='/home' component={() => <HomePage dishes={dishes} promotions={promotions} leaders={leaders} />}/>
              <Route exact path='/menu' component={() => <Menu {...props} dishes={dishes} />} />
              <Route path='/menu/:dishId' component={() => <DishWithId {...props}  />} /> 
              {/*<Route path='/menu/:dishId' component={ DishWithId } /> */}
              <Redirect to="/home" />
            </Switch>
          <Footer />  
          </div>
        </div>
      );
    };

const DishWithId = (props) => {
      console.log(props.match);
      return(
        <div></div>

      );
    };

Я передаю этот реквизит обратно в мой компонент DishWithId следующим образом:

• Я использую ... реквизиты, чтобы также перенести реквизиты матча, локации, истории.

< Route path='/menu/:dishId' component={() => <DishWithId {...props}  />} />

Когда я просматриваю http://localhost/menu/0 и посмотрите на реквизиты, в реквизите MATCH нет правильного URL.

match: {path: "/", url: "/", params: {…}, isExact: false}

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

<Route path='/menu/:dishId' component={ DishWithId } />
match: {path: "/menu/:dishId", url: "/menu/1", isExact: true, params: {…}}

Любые идеи, почему совпадение не работает, когда я использую:

<Route path='/menu/:dishId' component={() => <DishWithId {...props}  />} /> 

Answer 1

Я думаю, вам нужно получить реквизиты маршрутизатора из параметров предоставляемой вами функции обратного вызова и передать их компоненту, который вы отображаете:

<Route path='/menu/:dishId' component={(routerProps) => <DishWithId {...props} {...routerProps}  />} />

Answer 2

Попробуйте использовать render вместо component

---

   < Route path='/menu/:dishId' render={() => <DishWithId {...props}  />} />