将按钮链接到另一个页面

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'

- iamacat

---

按下按钮后，您想进入第二个页面吗？还是您想将第二个页面作为此按钮的一部分？您使用哪个版本的路由器？ - Mayank Shukla

你正在使用 react-router 4 吗？请给我们更多信息。 - glhrmv

@dogui 直到现在我才听说过React Router 4，我目前正在编写React Native。我希望这个按钮可以将用户引导到我已经导入的应用程序中的另一个页面。 - iamacat

Answer 1

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

• 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
    );

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

- Maheshvirus

Answer 2

使用react-router中的<Link>标签。

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

- Yash Sharma

---

我不确定应该把它放在哪里。是放在视图标签下面像这样：<Link to ='/SecondPage'></Link>吗？ - iamacat

未捕获的错误：您不应该在<Router>外部使用<Link>。 - AlxVallejo

Answer 3

有两种方法可以实现此操作。具体细节如下。

选项1：如果您正在使用React Router，您可以使用Link将用户重定向到第二个页面。

在路由器配置中声明一个路由以转到第二页，并使用Link。更多细节请参见这里。

选项2：如果您没有使用React Router并且只是进行重定向，请使用按钮上的onClick来重定向到新的URL。例如：React：如何通过clickHandlers导航？ 备注-选项2是从一张页面到另一张页面的不正规的方法。当您的应用程序变得庞大且页面上有许多重定向时，建议使用React Router。

希望这有所帮助！

- Rohan Rayarikar

---

对于选项1，我是不是应该在<View>标签下这样做？<Link to='/SecondPage'></Link> - iamacat

我会建议在<View>标签之前这样做。 - Rohan Rayarikar