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

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;

Answer 2

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

选项1：如果您使用的是反应路由器，则可以使用“链接”将用户重定向到第二页。

在路由器配置中声明路由转到第二页并使用。更多细节在这里 http://knowbody.github.io/react-router-docs/api/Link.html

选项2：如果您没有使用反应路由器而只是重定向，请使用按钮上的onClick重定向到新的URL。例如。 React: How to navigate via clickHandlers?

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

希望有所帮助！

Answer 3

使用<Link>

中的react-router

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

将按钮链接到另一个页面

3 个答案: