Блог

У меня есть родительский компонент, который рендерит некоторые вещи, и дочерний компонент, который получает некоторые реквизиты от родительского компонента. И когда пользователь нажимает кнопку в родительском, он должен перенаправить на совершенно новую страницу дочернего компонента.

Родительский компонент

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

Рабочая демонстрация

попробуйте сделать это:

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

я меняю код.

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>
  );
}

  

Рабочая демонстрация