gpt4 book ai didi

reactjs - 将按钮链接到另一个页面

转载 作者:行者123 更新时间:2023-12-03 13:40:39 26 4
gpt4 key购买 nike

我目前有一个按钮

class Button extends Component{
render(){
return(
<View>
onPress= #I need this to return the second page of my app
<Text style={styles.buttonText}>Next Page</Text>
</View>
)
}
}

我应该怎样做才能将此按钮链接到我的应用程序的第二页?假设我已经导入了页面。

import SecondPage from './SecondPage'

最佳答案

下面的示例可以解决您的所有问题:

  • React 路由器导航
  • 浏览器刷新问题。
  • 浏览器后退按钮问题。

请确保您已安装react-router-dom

如果没有安装。使用此命令安装npm i react-router-dom

index.js

   import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch } from "react-router-dom";

import Page1 from "./Page1";
import Page2 from "./Page2";

const rootElement = document.getElementById("root");
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/" component={Page1} />
<Route path="/page2" component={Page2} />
</Switch>
</BrowserRouter>,
rootElement
);

Page1.js

   import React from "react";
import {Link } from "react-router-dom";

function Page1() {

return (
<div>
<p>
This is the first page.
<br />
Click on the button below.
</p>
<Link to="/page2"><button>
Go to Page 2
</button>
</Link>
</div>
);

}

export default Page1;

Page2.js

   import React from "react";

function Page2() {

return (
<div>
<p>This is the second page.</p>
</div>
);

}

export default Page2;

关于reactjs - 将按钮链接到另一个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44387318/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com