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>

如果不是，您可以从hight元素委派此props.history。

或者如果你是深入的结构，或者你只是不想委托历史对象，你可以创建一个没有paht的新的，所以它将匹配所有并且它会让你正确的历史对象。

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

使用react-router

1 个答案: