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

Question

我有两个组成部分.在第一个组件中,我有一个按钮.单击按钮我想导航到另一个组件或另一个页面.

这是我的代码 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'))

Answer 1

更新答案：

"react-router-dom": "^6.2.2",

现在useNavigate()不再是useHistory() ，而是从 'react-router-dom' 导出来处理所有此类导航。

import { useNavigate } from "react-router-dom"

重定向：

const navigate = useNavigate()

const onClickHandler = () => navigate(`/product/123`)

Answer 2

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

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

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;

使用Link来自react-router-dom

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

  function NavigationDemo() {

  return (
   <div>
   <Link  to={{pathname: '/componentURL'}}>NavigateNow</Link>
   </div>
  );
}
export default NavigationDemo;

使用Redirect来自react-router

  import { Redirect } from 'react-router';

   <Redirect to='/componentURL' />

Answer 3

这里有两种方法，都相当容易。

方法1：使用React Router

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

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

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

接下来，您想更新handleClick功能以使用Linkfrom react-router-dom（如果尚未使用，则可能必须安装此软件包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与按钮相同的className，以便将其样式设置为按钮而不是锚标记。

全部放在一起。

//无论您的路由器与路线在哪里

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

方法2：使用 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或name等变量。请参见下文。

动态路径

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

将路线更改为此：

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

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

更新您的链接至此：

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

如果您使用window.openupdate，则如下所示：

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的更多信息。原始链接：https：//medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

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

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

Answer 4

如果你想构建一个应用程序,我建议使用React Router.否则你可以使用普通的Javascript:

window.location = 'newUrl';