How to navigate from one page to another in js response?

Question

I have two components. In the first component, I have one button. When I click a button, I want to go to another component or another page.

here is my code 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

There are two approaches here, both quite simple.

Approach 1. Using React Router

Make sure you already have a route in your project. It should contain this information as a minimum: path and component. It should be defined something like this:

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

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

handleClick, Link 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 , , , .

.

//

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

, . , .

:

<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 . , , : " "/insert/your/path/here/valueOfVariablName ", React , -, "/insert/your/path//: ": OfVariableName. , . . . , , ..

React-Router . : https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

. , .

, , . , Link. , , , .

Answer 2

, React Router. Javascript:

window.location = 'newUrl';

Answer 3

:

response.js

?

Answer 4

Link , .

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

            </div>
        )
    }
}

for these two components above you can use the link.

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

However, anchor tags are used to navigate to completely different HTML documents. for example, for Google oauth, if you want to log in to the user, you must go to a different URL when the user clicks the "Sign in with Google" button.

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