Ссылка не работает с React Router Dom + hooks + redux + typcript - PullRequest
Новая
       36

Ссылка не работает с React Router Dom + hooks + redux + typcript

0 голосов
/ 17 февраля 2019

Я делаю приложение, которое использует:

  • реагирует роутер
  • редукс
  • машинопись
  • крючки
  • Аполлонклиент

Проблема Компонент Link у меня не работает.Пытался проверить много страниц на предмет проблемы без успеха.Все время, когда я пытаюсь это сделать, <Link to='/example> попадает в эти ошибки (оставляя мою страницу пустой)

enter image description here

Примечание: является моим компонентом,

Если я делаю <Link to='/'>, который не вызывает никаких ошибок (я полагаю, контекст не меняется для реагирующего маршрутизатора

Вот забавный факт. С этой ошибкой, URLменяется, и если я обновляю, страницы работают. Так что я думаю, что это неправильная конфигурация, связанная с react-router-dom больше, чем просто компонент Ссылка.

Еще один интересный факт, что все работает, если я добавлю параметр forceRefresh из компонента <BrowseRouter>.

Моя конфигурация

Вот некоторая информация о моей конфигурации

App.tsx 

<Router forceRefresh>
        <Fragment>
          <Header />
          <Route exact path="/" component={IndexIssues} />
          <Route exact path="/show/:id" component={ShowIssues} />
        </Fragment>
      </Router>

IndexIssues.tsx 

import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'

import { RootState } from '@/reducers'


import * as actions from '@/state/issues/actions'
import { Props, IStateIssues } from './types'
import { setIssues, filterResults } from './IndexIssues.effects'
import { Link, withRouter, RouteComponentProps } from 'react-router-dom'

const IndexIssues: React.FC<Props> = props => {
  const [filteredIssues, setFilteredIssues] = useState([])
  const [textSearch, setTextSearch] = useState('')
  const [stateIssues, setStateIssues] = useState<IStateIssues>({
    open: true,
    closed: true
  })

  useEffect(() => props.getIssues(), [])
  useEffect(() => setIssues({ props, setFilteredIssues }), [props.issues])

  const handleSearchChange: React.ReactEventHandler<HTMLInputElement> = (
    e
  ): void => {
    const newText = e.currentTarget.value
    const { issues } = props
    setTextSearch(newText)
    filterResults({ newText, setFilteredIssues, issues, stateIssues })
  }

  const handleCheckBox: React.ReactEventHandler<HTMLInputElement> = (
    e
  ): void => {
    const option: string = e.currentTarget.value.toLowerCase()
    const { issues } = props
    const newState = { ...stateIssues, [option]: !stateIssues[option] }
    setStateIssues({ ...stateIssues, [option]: !stateIssues[option] })
    filterResults({
      newText: textSearch,
      setFilteredIssues,
      issues,
      stateIssues: newState
    })
  }

  return (
    <div>
      <Link to="/show/5">
        click me!
      </Link>
      ....
    </div>
  )
}

export default withRouter(connect(
    (state: RootState) => ({
      issues: state.issues
    }),
    actions
  )(IndexIssues)
)

types.tsx 

export interface Props extends RouteComponentProps<any>{
  one: string
  getIssues(): any
  issues: any
}

Любая помощь может быть болеечем приветствую. Пока я работаю с опцией forceRefresh, но в идеале я бы решил проблему ...

Спасибо!

...