使用反應路由器中的MemoryRouter導航JavaScript

我正在使用React構建單頁Web應用程序。對於這個應用程序，我想阻止URL的更改，也避免使用href鏈接來防止「鏈接預覽」出現在瀏覽器的左下角。使用反應路由器中的MemoryRouter導航JavaScript

爲解決我的問題的前半部分，我發現使用反應路由器中的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顯示在屏幕的左下角。如果我可以使用另一個元素並點擊，我會是金色的。

來源

2017-07-16 Corey

如果你是在<Route>子組件，你可以簡單地做到這一點

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

如果你不是，你可以從HIGHT元委託該props.history。

或者如果你在結構上很深，或者你只是不想委託歷史對象，你可以創建一個沒有paht的新的，所以它會匹配allways，它會授權你正確的歷史對象。

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

來源

2017-07-18 08:59:10 Melounek

使用反應路由器中的MemoryRouter導航JavaScript

回答

相關問題