как решить проблему программной навигации, используя реагирование и машинопись - PullRequest
Новая
       6

как решить проблему программной навигации, используя реагирование и машинопись

0 голосов
/ 07 января 2019

Я новичок, чтобы реагировать, и я учусь реагировать на программную навигацию с использованием typescript. Поскольку большинство учебных пособий написано на языке Java, я не могу решить проблему с программной навигацией с использованием машинописи

Как и в большинстве уроков, которые я пробовал 

this.props.history.push("/page");

, который показывает ошибку «история» не существует для типа

Я пробовал несколько решений, таких как 

 const history=createBrowserHistory();
 history.push("/page")

Этот метод изменит путь URL, но компонент не будет загружаться, как указано здесь https://github.com/ReactTraining/react-router/issues/4059

Я также попробовал другие решения 

this.context.push("/page");

что дает мне ошибку ниже TypeError: _this.context.push не является функцией

мой полный код 

import * as queryString from 'query-string';
import * as React from 'react';



interface IrentalProps{
name:string,
}



class Rental extends React.Component<IrentalProps, any> {

public extracturl=()=>{

    const stringfy=queryString.parse(location.search);
    return stringfy.id;
}
public handleClick=()=>{
   this.context.push("/page"); //issue 
}
public render() { 
    return ( 
        <div style={{paddingTop:100}}>
        {this.extracturl()}
        <button onClick={this.handleClick}>navigate</button> //calling the function
       </div>
     );
}

}

export default Rental;

Мне нужно только перейти на другую страницу по нажатию кнопки, как в SPA, используя машинопись и browserrouter

Примечание: работает редирект и работает хеш-роутер с createhashhistory ().

Ответы [ 2 ]

0 голосов
/ 08 января 2019

при создании собственной истории вам нужно использовать Router, а не BrowserRouter. 

import createBrowserHistory from 'history/createBrowserHistory'

const History = createBrowserHistory()
export default History;

и передача истории в реквизит роутера

благодаря BTM

0 голосов
/ 07 января 2019

вам нужны типы реагирующих маршрутизаторов. в корне проекта установите их (package.json)

npm install --save @types/react-router

и

npm install --save @types/react-router-dom

...