将按钮链接到另一个页面

Question

我目前有一个按钮

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'

Answer 1

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

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

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

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

索引.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
    );

页面1.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;

页面2.js

   import React from "react";

   function Page2() {

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

    }

    export default Page2;

Answer 2

使用<Link>自react-router

<Link to ='/href' ></Link>

Answer 3

有两种方法可以实现这一目标。详情如下

选项 1：如果您使用的是 React router，您可以使用 Link 将用户重定向到第二页。

在路由器配置中声明一条路由以转到第二页并使用 . 更多详细信息请参见 http://knowbody.github.io/react-router-docs/api/Link.html

选项 2：如果您不使用 React Router 而只是重定向，请使用按钮上的 onClick 重定向到新 URL。例如React：如何通过 clickHandlers 进行导航？

注意 - 选项 2 是一种从一页导航到另一页的肮脏方式。一种复杂的方法是使用react-router。当您的应用程序变得越来越大并且页面上发生许多重定向时，您将需要它。

希望有帮助！