How to redirect to completely new page after user click in react?

user_10539973 0
Viewed 156

I have a parent component which is rendering some stuff and a child component which is getting some props from parent component. And when user click button in Parent then it should redirect to completely new Page of child componen.

Parent Component

import React from "react";`enter code here`
import "./styles.css";
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom'
import ChildComponent from './ChildComponent'

export default function App() {
  const someData = {
    name : "Joh Doe"
  }
  return (
    <div className="App">
      <h1>This is parent Component</h1>
      <Router>
        <Link to='/secondpage'>Click me for Second Page</Link>
        <Route
          path='/secondpage'
          render={(props) => (
            <ChildComponent {...someData} isAuthed={true} />
          )}
        />
      </Router>
    </div>
  );
}

ChildComponent.js

import React from "react";

export default function ChildComponent(props) {
  console.log("Data", props);
  return <div>This is Second Page. It should open in new page. Also it should render incoming props</div>;
}

Work Demo

CodeSandbox

react-router reactjs
2 Answers

try doing this:

import React from 'react';
import {BrowserRouter as Router,Route, Redirect,Switch} from 'react-router-dom';
import Home from './App.js';
import Tutorials from './tutorials.js';

function Routes() {
    return (
    <Router>
      <div>
        <Switch>
           <Route path="/" component = {Home}>
           <Redirect from = "/blog/" to="/tutorials/" />
           <Route path = "/tutorials/" component = {About} />
        </Switch>
      </div>
    </Router>
    )
}
user_137705850

i am change code .

parent component

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

export default function ParentComponent(props) {
  console.log("Data", props);
  return (
    <div className="App">
      <h1>This is parent Component</h1>
      <Link to="/secondpage">Click me for Second Page</Link>
    </div>
  );
}

child component 

import React from "react";

export default function ChildComponent(props) {
  console.log("Data", props);
  return (
    <div>
      This is Second Page. It should open in new page. Also it should render
      incoming props
    </div>
  );
}

app component 

import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ChildComponent from "./ChildComponent";
import ParentComponent from "./parentComponent";

export default function App() {
  const someData = {
    name: "Joh Doe"
  };
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/secondpage">
            <ChildComponent {...someData} isAuthed={true} />
          </Route>
          <Route exact path="/" component={ParentComponent} />
        </Switch>
      </Router>
    </div>
  );
}

Work Demo

CodeSandbox

user_67741620
Related