Как использовать библиотеку истории и <Link>в React - PullRequest
Новая
       32

Как использовать библиотеку истории и <Link>в React

0 голосов
/ 22 мая 2018

Я новичок в React-Redux, и у меня возник вопрос о том, как использовать историю и тег Link, чтобы перейти в определенное место.

Я хотел иметь возможность использовать историю.push в моих действиях, поэтому я использовал JS-библиотеку history .Я создал файл history.js в папке своего приложения:

src / history.js 

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

Затем я импортировал объект истории в мой App.js, и мои маршруты были помещены втег Маршрутизатор с историей:

src / App.js 

<Router history={history}>

      <Switch>
        <Route path="/loginscreen" component={Loginscreen} />
        <Route path="/login" component={Login} />
        <Route path="/Property-Assistant-2018/profile" component={Profile} />
        <Route path="/Property-Assistant-2018/properties" component={Property} />
        <Route path="/Property-Assistant-2018/detail/:id" render={(props)=><PropertyDetail{...props}/>} />
        <Route path="/Property-Assistant-2018/new_property" component={NewProperty} />
        <Route path="/Property-Assistant-2018/register" component={Register} />
        <Route path="/Property-Assistant-2018/contact" component={Message} />
        <Route path="/Property-Assistant-2018/edit_property/:id" render={(props)=><EditProperty{...props}/>}/>
        <Route path="/Property-Assistant-2018" component={Initial} />

      </Switch>

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

src / App.js 

<Link to="/Property-Assistant-2018/contact">Contact</Link>

Итак, мой вопрос: как я могу использовать историю и теги ссылок одновременно?Я знаю, что история включена в React-Router v.4, и я использовал это, но я не могу использовать ее для своих действий.

Возможно, это простое исправление, поэтому спасибо за помощь в решении этой проблемы.

1 Ответ

0 голосов
/ 23 мая 2018

Я выяснил проблему:

Я должен обернуть весь App App тегом Router. 

<Router history={history}>
  <div className="App">
  </div>
</Router>

Это часть ответа на этот вопрос StackOverflow: Как перейти к истории в React Router v4?

...