如何在 React js 中从一个页面导航到另一个页面？

Posted 2023-02-21

【中文标题】如何在 React js 中从一个页面导航到另一个页面？

【英文标题】：how to navigate from one page to another in react js?

【发布时间】：2016-09-14 16:33:51

【问题描述】：

我有两个组件。在第一个组件中，我有一个按钮。单击按钮时，我想导航到另一个组件或另一个页面。

这是我的代码 http://codepen.io/naveennsit/pen/pymqPa?editors=1010

class App extends React.Component 
    handleClick()
      alert('---');
    

    render() 
        return <button onClick=this.handleClick>hello</button>
    


class Second extends React.Component 
    render() 
        return <label>second component</label>
    


React.render( <App /> , document.getElementById('app'))

【参考方案1】：

以下是处理反应导航的最佳方法

使用来自react-router-dom 的useHistory()

import React from 'react';
import  useHistory  from "react-router-dom";
function NavigationDemo() 
  const history = useHistory();
  const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');

  return (
   <div>
   <button onClick=navigateTo type="button" />
   </div>
  );

export default NavigationDemo;

使用来自react-router-dom 的Link

import React from 'react';
 import  Link  from "react-router-dom";

  function NavigationDemo() 

  return (
   <div>
   <Link  to=pathname: '/componentURL'>NavigateNow</Link>
   </div>
  );

export default NavigationDemo;

使用来自react-router的Redirect

  import  Redirect  from 'react-router';

   <Redirect to='/componentURL' />

【参考方案2】：

我们应该像下面这样使用结构

import history from 'services/History'
import  Router , Route, Switch  from "react-router-dom";


class App extends Component 
  render() 
    return (
      <Router history=history >
        <div className="root">
          <Switch>
            <Route path="/" component=MainPage exact />
            <Route path="/dashboard" component=DashBoard exact />
            <Route path="/docs" component=Docs exact />
            <Route component=ErrorPage />
          </Switch>

        </div>
      </Router >
    );
  

History.js 是

// google analytics
import ReactGA from 'react-ga';
import createHistory from 'history/createBrowserHistory';

ReactGA.initialize('UA-156453259-1');
ReactGA.pageview(window.location.pathname);


const history = createHistory();
history.listen((location) => 
  ReactGA.set(
    page: location.pathname,
  );
  ReactGA.pageview(location.pathname);
);

export default history;

【参考方案3】：

我们使用 Link 导航到由 react-router 托管或路由的不同路由。

class App extends React.Component 
    render()
        return (
            <div>
                <BrowserRouter>
                    <div>
                    <Route path="/"  component=Landing exact />
                    <Route path="/surveys" component=Dashboard/>
                    </div>
                </BrowserRouter>

            </div>
        )
    

对于上面的这两个组件，您可以使用 Link。

<Link to="/surveys">go to my surveys</Link>

但是，锚标记用于导航到完全不同的 html 文档。例如对于 google oauth，如果您想登录用户，当用户单击“使用 Google 登录”按钮时，您必须导航到不同的 url。

<a href="/auth/google">Login with Google</a>

【参考方案4】：

这里有两种方法，都相当简单。

方法一：使用 React Router

确保您已经在项目中的某处设置了路线。它至少应该包含以下信息：路径和组件。应该这样定义：

import YourComponent from "./path/of/your/component"; 

<Route path="/insert/your/path/here" component=YourComponent /> 

接下来，您要更新您的handleClick 函数以使用react-router-dom 中的Link（如果您尚未使用npm i react-router-dom 安装此软件包，则可能需要安装它）。

删除这个（你的handleClick函数你不需要它Link）：

handleClick()
  alert('---');

    render() 
        return <button onClick=this.handleClick>hello</button>
    

现在将您的渲染方法更改为：

    render() 
        return (
          <div>
            <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
         </div>
       ); 
    

为Link 提供与您的按钮相同的类名，以便将其设置为按钮而不是锚标记。

把它们放在一起。

//无论你的路由器和你的路由在哪里

    import YourComponent from "./path/of/your/component";

    <Router>
      <Route exact path="/insert/your/path/here" component=YourComponent />
    </Router>

//具有handleClick功能的组件

import  Link  from "react-router-dom"; 

class App extends Component 
  render() 
     return(
       <div>
         <Link to="/insert/your/path/here" className="btn btn-primary">hello</Link>
      </div>
     );
  

方法二：使用window.open

仍然要确保您已按上述方式设置了路线。这里的不同之处在于您不会使用Link，这意味着您将需要handleClick 函数。那将是唯一改变的事情。

改变这个：

handleClick()
  alert('---');

对此：

handleClick()
  window.open("/insert/your/path/here");
  //this opens in a new tab (believe that is what the owner of the question wanted if not you can do window.location.href = "/insert/your/path/here". 

就是这样。如果你想让你的路径动态化，这意味着它们包含 id 或名称等变量。见下文。

动态路径

动态路径可以包含名称和 ID 或您想要的任何变量。您首先必须调整路线，然后相应地更改您的链接或位置。

将路线更改为：

<Route path="/insert/your/path/here/:name" component=YourComponent />

注意冒号 (:)，这允许您通过变量在此处注入字符串。

将您的链接更新为：

<Link to=`/insert/your/path/here/$variableName`>hello</Link>

如果您使用的是window.open，请像这样更新它：

window.open(`/insert/your/path/here/$variableName`); 

这里有几点需要指出。您在等号后使用括号，因为这告诉 React，嘿，我需要在这里输入一个变量。接下来注意后面的勾号 ` 这告诉 React 你正在使用一个字符串文字，这意味着嘿，我希望你将它解释为一个字符串，但首先在这里获取我的变量的值并为我转换成一个字符串。 $ 允许您放置一个变量，以便 React 可以正确解释它。所以总而言之，react 将该行读取为：将用户带到路径“/insert/your/path/here/valueOfVariablName”然后 React 检查该路径的路由并说嘿我们有一些东西是“/insert/your/path /here/:name" 所以 :name 必须等于 valueOfVariableName。希望这有点道理。您可以在控制台中验证动态路径。记录你的道具。您应该会看到一个包含位置、历史记录等的对象。

您还可以阅读更多关于 React-Router here 的信息。原始链接：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

如果有人有更好的资源。请随时编辑我的答案或发表评论。

我希望这对遇到这个问题的人有所帮助。顺便说一句，您也可以通过Link 传递状态。如果您想知道如何操作，请发布另一个问题。

【讨论】：

有一点值得一提：使用 Link 不会刷新页面，而使用 window.location.href 会刷新页面。如果您只关注单页应用程序，那么这绝对是您需要考虑的事情。

【参考方案5】：

如果您想构建一个应用程序，我建议您使用React Router。否则你可以只使用普通的 javascript：

window.location = 'newUrl';

【讨论】：

我需要使用 React Router ..你能告诉我如何使用它吗？

阅读文档并查看示例。如果您有特定问题，请在此处创建一个新问题。

我在我的代码笔中添加了路由器js，我将在其中编写路由器配置

我添加了一个关于如何使用路由器进行操作的答案。