使用react-router中的MemoryRouter使用javascript导航

Question

我正在使用React构建单页Web应用程序。 对于这个应用程序，我想阻止URL更改，并避免使用href链接，以防止“链接预览”显示在浏览器的左下角。

为了解决我的问题的前半部分，我发现使用react-router中的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
);

然后在App中我有这样的代码（有效）：

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

我无法弄清楚如何使用MemoryRouter在javascript中更改页面。 我能找到的唯一方法是使用Link标记，这会导致url显示在屏幕的左下角。 如果我可以使用另一个元素和onclick，我会是金色的。

Answer 1

如果您在<Route>子组件中，则可以执行此操作

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

如果你不是，你可以从最高元素委托这个props.history 。

或者如果您是深入结构，或者您只是不想委托历史对象，则可以创建一个新的无路径，因此它将始终匹配并且它会为您委派正确的历史对象。

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