React Router с параметрами пути не работает

Question

У меня есть реагирующий BrowserRouter со следующей конфигурацией.

<BrowserRouter>
        <div>
            <Switch>
                <Route path={`/`} component={Home} exact/>
                <Route path={`/about`} render={(props) => <About {...props}/>} exact/>
                <Route path={`/products/:id/:slug`} render={(props) => <Products {...props}/>} exact/>
            </Switch>
        </div>

На странице «О нас» есть товары со следующим тегом. Если щелкнуть ссылку, URL-адрес изменится, и страница продукта будет отображаться правильно.

<Link to={'/products/' + product.id + '/' + product.slug>{product.name }</Link>

Но когда я прямо на страницу продукта, используя точный URL. рендеринг не будет работать.

 e.g localhost:3000/products/123/books

Есть идеи, что является причиной проблемы?

Answer 1

В компоненте вашего продукта используйте

, если компонент является компонентом с полным состоянием this.props.match.params.id for id = 123 this.props.match.params.slug for slug = books

, если компонент является компонентом без состояния, тогда вам нужно использовать «withRouter», чтобы сделать указанную строку доступной для импорта{withRouter} из "act-router ";

и оберните вашу функцию этим методом

const MyComponent = () => {} экспорт по умолчанию с помощьюRouter (MyComponent)

Должно работать !!!

Answer 2

Для создания «клиентских, виртуальных» маршрутов, работающих с любого URL, вам нужна поддержка на стороне сервера - например, apache mod-rewrite.

Уже задано здесь

Answer 3

Я считаю, что ваша проблема в том, что вы получаете сообщение об ошибке НЕ МОЖЕТ ПОЛУЧИТЬ, когда вы указываете прямой URL.Попробуйте установить historyApiFallback: true в вашем webpack.config.js