React Router Param bug - PullRequest
Новая
       15

React Router Param bug

0 голосов
/ 18 марта 2020

РЕДАКТИРОВАТЬ: Я нашел проблему, я пошел дальше и дважды проверил мой компонент заголовка. Я использовал относительный путь «логин», а не абсолютный путь «/ логин». Когда я переключился с «входа в систему» ​​на «/ входа в систему», проблема была исправлена.

У меня проблемы с реагирующим маршрутизатором. У меня есть компонент App Class, где я нахожу все свои маршруты. Проблема в том, что когда я go перехожу на страницу "Продукты" (http://localhost: 3000 / продукты ), я могу напрямую связаться с "ProductPage", где я получаю маршрут "http://localhost: 3000 / продукции / Scotts"; однако при переходе от этого маршрута к другому маршруту, например, к «LoginPage», я получаю следующий маршрут «http://localhost: 3000 / products / login » вместо «http://localhost: 3000 / Логин ». Я поделюсь важными фрагментами кода ниже. 

 <Router> 
        <div className="App">
          <ScrollToTop />
            <Header/>  
            <Switch >
              <Route exact path="/" component={ LandingPage }/>

          <Route  exact path="/login" component={ LoginPage }/>

              <Route  exact path="/products" component={ Products }/>
              <Route 
                exact 
                path="/products/:product"
                render={props => {
                  return <ProductPage {...props} />;
                }} 
              /> 

              <Route path="resetPassword/:id" component={ChangePassword} />
            </Switch>
          <Footer />
        </div>
      </Router>

Здесь я связываю маршрут от Продуктов до одностраничного маршрута Продукта: 

 {currentProducts.map(item => {
                const { image, title, price, stock } = item;
                return (
                    <div className="product-wrap" key={uuid()}>
                        <Link 
                            to={{
                                pathname: `${location.pathname}/${item.title}`,
                                state: {
                                    item: item,
                                    inStock: stock
                                }
                            }}
                            >
                            <div>
                                <div className="product">
                                    <div className="circle">
                                        <img alt="item" src={image} />
                                    </div>
                                </div>
                            </div>
                        </Link>
                        <div
                            style={{ textDecoration: "none", color: "black" }}
                            className="title"
                        >
                            {title}
                        </div>
                        <div
                            style={{ textDecoration: "none", color: "black" }}
                            className="price"
                        >
                            ${price}
                        </div>
                    </div>
                );
            })}
...