javascript - 如何在 React 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

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

方法 1:使用 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 提供与您的按钮相同的类名，以便将其样式设置为按钮而不是 anchor 标记。

把它们放在一起。

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

    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} />

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

更新您的链接:

<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。希望这有点道理。您可以在控制台中验证动态路径。记录你的 Prop 。您应该会看到一个包含位置、历史记录等的对象。

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

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

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