URL карты по React-Router?

Question

[Shakir Darion]

У меня есть поисковая форма с URL-адресом, например localhost: 3000 / search? Keyword = xxx & subject = AAA & filter2 = BBB и т. Д. Как создать маршрут реакции для URL, чтобы пользователь мог добавить в закладки поиск? Мой код index.js ниже:

import { Route, Link, BrowserRouter as Router } from 'react-router-dom';
const routing = (
<Router>
  <div>
    <Route path="/" component={App} />

  </div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Answer 1

[Антон Спирин]

<Switch>
  <Route exact path="/" component={App} />
  <Route path="/search" component={Results} />
</Switch>

const Results = ({ location }) => {
  const { search } = location;
  // do something with search
  return ( ... );
};

search будет иметь строчное значение вида:
'?кeyword=xxx&subject=AAA&filter2=BBB'
Его необходимо парсить любым удобным вам способом.

Comments

[Shakir Darion]

<Route path="/search" component={Results} />
может так ?
<Route path="/:search" component={Results} />

[Антон Спирин]

Shakir Darion, смотря какую ссылку вы хотите.
Если у вас будет маршрут "/search", по которому можно осуществлять поиск, то так:
<Route path="/search" component={Results} />
Никаких параметров, в этом случае, передавать не надо.

[Shakir Darion]

Антон Спирин, ok

[Андрей Hecc]

Shakir Darion,
Вот это правильный вариант реализации:
<Route path="/search" component={Results} />

Пользователь переходит по /search?q=123

Дальше, все нужные параметры вытягиваете с пропсов location.search

[Shakir Darion]

Антон Спирин, Андрей Hecc я написал как вы сказали Почему не работает

[Антон Спирин]

Shakir Darion, свойство exact в первый Route надо добавить.
<Route exact path="/" component={App} />

[Shakir Darion]

Антон Спирин, ok (