在 react-router 中使用 MemoryRouter 以 javascript 导航

Question

我正在使用 React 构建单页 Web 应用程序。对于此应用程序，我想防止 URL 发生变化，并避免使用 href 链接来防止 "link preview" 出现在浏览器的左下角。

为了解决我的问题的前半部分，我发现在应用程序中导航时，使用 react-router 中的 MemoryRouter 可以防止 URLs 发生变化。

这是路由器的 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> 的子组件中，你应该有 history prop 可用：

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

如果不是，可以从父元素传递 props.history。

或者如果你对结构很深入，你应该使用 withRouter HOC

或者您可以在没有 path 属性的情况下创建一个新的，这样它将始终匹配并为您提供正确的历史记录对象。

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

在 react-router 中使用 MemoryRouter 以 javascript 导航

Navigate with javascript using the MemoryRouter in react-router

html

javascript

css

reactjs

react-router-v4