反応ルータのMemoryRouterを使用してjavascriptでナビゲート

Question

Reactを使用して単一ページのWebアプリケーションを構築しています。このアプリケーションでは、URLの変更を防止し、hrefリンクを使用してリンクプレビューがブラウザの左下に表示されないようにします。

私の問題の前半に対処するために、反応ルータのMemoryRouterを使用すると、アプリケーション内をナビゲートするときにURLが変更されないことがわかりました。ここで

は、ルータのためのPoCです：

import App from './stuff/main/App'; 
import {Route, MemoryRouter} from "react-router"; 
import default_page from "./stuff/pages/default_page" 
import another_page from "./stuff/pages/another_page" 

const app = document.getElementById('root'); 
ReactDOM.render(
    <MemoryRouter> 
     <App> 
     <Route exact path="/" component={default_page} /> 
     <Route path="/anotherpage" component={another_page} /> 
     </App> 
    </MemoryRouter>, 
    app 
); 

は、次にアプリケーションに私はこのようなコード（作品）があります。

... 
<Link to="/">default_page</Link> 
<Link to="/anotherpage">another_page</Link> 
{this.props.children} 
... 

を私が使用してJavaScriptでページを変更する方法を見つけ出すことはできませんMemoryRouter。私がその作品を見つけることができる唯一の方法は、URLを画面の左下に表示させるLinkタグを使用することです。私が別の要素とonclickを使うことができれば、私は金色になります。

Answer 1

あなたが<Route>の子コンポーネントである場合、あなたは単にあなたがいない場合、あなたは絶頂要素からこのprops.historyを委任することができ、この

<button onClick={()=>this.props.history.push('/anotherpage')} >another_page</button> 

を行うことができます。

深い構造の場合、またはヒストリオブジェクトを委任したくない場合は、pahtなしで新しいものを作成することができます。したがって、それは常に一致し、正しい履歴オブジェクトを削除します。

<Route render={({history})=>(
    <button onClick={()=>history.push('/anotherpage')} >another_page</button> 
    // more buttons 
)} />