在 react-router 中使用 MemoryRouter 以 javascript 导航
Navigate with javascript using the MemoryRouter in react-router
我正在使用 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,我会很高兴。
如果你在 <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 构建单页 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,我会很高兴。
如果你在 <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
)} />