Блог

Главная - Вопросы по программированию - Маршрутизатор React не может маршрутизировать URL-адрес с помощью строки поиска

Маршрутизатор React не может маршрутизировать URL-адрес с помощью строки поиска

#reactjs #react-router

#reactjs #react-router

Вопрос:

Я хочу щелкнуть ссылку со строкой поиска. Но маршрутизатор react не перенаправляет на эту страницу. После обновления страница загружается. Что-то не так?

URL

  http://localhost:3000/landing?cars

Кнопка ссылки

                 <Button
                 component={Link}
                 to={{pathname: "/landing?cars"}}
                 >
                 Cars
                </Button>

маршрутизатор

 <Switch>
    <Route path="/landing" component={Landing} />
    ...
</Switch>

Комментарии:

1. почему бы просто to="/landing?search=cars"

2. @lala это также не работает

3. О, моя ошибка. В <Route path="/landing/:search" component={Landing} /> и to="/landing/cars" . Затем на целевой странице вы можете использовать const {search} = useParams() . Но сначала убедитесь, что вы импортировали его из const { useParams } from 'react-router-dom'

4. или вы можете обратиться сюда для обоих, используя query или param

5. вы можете обратиться к этой изолированной среде

Ответ №1:

Нужен необязательный параметр:

 <Switch>
    <Route path="/landing/:search" component={Landing} />
    ...
</Switch>

<Button
    component={Link}
    to="/landing/cars"
    />
    Cars
    </Button>

Затем на целевой странице вы можете получить доступ к параметру с помощью объекта match . Например:

 const { searchValue } = this.props.match.params.id;

Комментарии:

1. По вашему предложению маршрутизация работает, но жесткое обновление приведет к появлению пустой страницы, потому что тогда я думаю: поиск не определен. С вашим решением вы не можете поделиться ссылкой. Вы знаете, как это исправить?

2. @vuvu Что вы подразумеваете под «поделиться ссылкой», можете ли вы создать изолированную среду кода для вашей проблемы / проблемы?