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

how to navigate from one page to another in react js?

本文关键字：一个 导航 另一个 react js      更新时间：2023-09-26

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

这是我的代码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路由器

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

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指定与按钮相同的classNames，使其样式为按钮而不是锚点标记。

把它们放在一起。

//无论你的路由器在哪里，你的路线

    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或名称等变量。见下文。

动态路径

动态路径可以包括名称和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，嘿，我需要在这里输入一个变量。接下来，请注意后面的勾号"this"告诉React，您正在使用字符串文字，这意味着嘿，我希望您将其解释为字符串，但首先在这里获取我的变量值，然后为我转换为字符串。$｛｝允许您放置变量，以便React能够正确解释它。因此，react将该行读取为：将用户带到路径"/insert/your/path/here/valueOfVariableName"，然后react检查该路径的路由，并说嘿，我们有"/inserd/your/path/here/：name"，所以：name必须等于valueOfVariableName。希望这有点道理。您可以在控制台中验证动态路径。记录你的道具。您应该看到一个包含位置、历史记录等的对象。

您也可以在这里阅读更多关于React Router的信息。原始链接：https://medium.com/@pshrmn/a-simple-react-router-v4-教程-7f23f27adf

如果有人有更好的资源。请随意编辑我的答案或留下评论。

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

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

使用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' />

更新的答案：

"；react router dom"："6.2.2"

现在从"react router dom"导出useHistory（），以处理所有此类导航。

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

重定向：

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

如果你想构建一个单独的应用程序，我建议你使用React Router。否则，您可以使用纯Javascript：

window.location = 'newUrl';

我们将使用类似以下的结构

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;

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

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文档。例如，对于googleoauth，如果你想登录用户，当用户单击"使用谷歌登录"按钮时，你必须导航到另一个url。

<a href="/auth/google">Login with Google</a>
相关文章：