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。否则你可以使用普通的Javascript：

window.location = 'newUrl';

Answer 2

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

方法1：使用React Router

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

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

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

接下来，您想更新handleClick函数以使用Link中的react-router-dom（如果您尚未使用{{1} }。

删除此内容（您不需要npm i react-router-dom的{{1}}函数）：

handleClick

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

Link

赋予handleClick(){ alert('---'); } render() { return <button onClick={this.handleClick}>hello</button> } }与按钮相同的className，以便将其样式设置为按钮而不是锚标记。

将所有内容放在一起。

//无论您的路由器与路线在何处

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

}

//具有handleClick功能的组件

Link

方法2：使用import YourComponent from "./path/of/your/component"; <Router> <Route exact path="/insert/your/path/here" component={YourComponent} /> </Router>

仍然请确保您已经按照上述步骤设置了路线。此处的区别在于您将不会使用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

就是这样。如果要使路径动态化，则意味着它们包括id或name等变量。请参见下文。

动态路径

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

将路线更改为此：

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". 
}

如果您使用的是<Route path="/insert/your/path/here/:name" component={YourComponent} />，请按照以下方式进行更新：

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

这里有几点要指出。您在等号后使用方括号，因为这告诉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

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

我希望这对遇到此问题的所有人有所帮助。同时，您也可以通过window.open传递状态。如果您想知道该怎么做，请发表另一个问题。

Answer 3

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

使用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 4

我们应该使用波纹管这样的结构

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;

Answer 5

我们使用链接浏览到由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 to="/surveys">go to my surveys</Link>

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

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

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

5 个答案: