Как перенести родительский маршрут из дочернего маршрута reactjs? - PullRequest
Новая
       96

Как перенести родительский маршрут из дочернего маршрута reactjs?

0 голосов
/ 28 мая 2020

Пожалуйста, помогите мне, как повторно отрендерить маршрут по умолчанию родительского компонента из дочернего компонента reactjs? см. следующий gif

enter image description here

Dashboard.jsx 

import React, { Component } from "react";
import { BrowserRouter, Redirect, Switch, Route, Link } from "react-router-dom";
import { withRouter } from "react-router";
import Master from "./Master";
import Pos from "./Pos";
import IndexDashboard from "./IndexDashboard";
import NotFound from "./404";
class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      islogout: false
    };
  }
  signOut = () => {
    localStorage.removeItem("token");
    this.setState({
      islogout: true
    });
  };
  render() {
    if (this.state.islogout) {
      return <Redirect to="/login" />;
    }
    const { match } = this.props;
    return (
      <BrowserRouter>
        <div className="container-fluid">
          <ul>
            <li>
              <Link to={`${match.path}`}>Dashboard</Link>
            </li>
            <li>
              <Link to={`${match.path}/master`}>Master</Link>
            </li>
            <li>
              <Link to={`${match.path}/pos`}>Pos</Link>
            </li>
            <li onClick={this.signOut}>signOut</li>
          </ul>
          <main role="main">
            <div className="main">
              <Switch>
                <Route path={`${match.path}/master`}>
                  <Master />
                </Route>
                <Route path={`${match.path}/pos`}>
                  <Pos />
                </Route>
                <Route exact path={`${match.path}`}>
                  <IndexDashboard />
                </Route>
                <Route path="*">
                  <NotFound />
                </Route>
              </Switch>
            </div>
          </main>
        </div>
      </BrowserRouter>
    );
  }
}

export default withRouter(Dashboard);

Master.jsx 

import React, { Component, Fragment } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import NewItem from "./NewItem";
import ListItem from "./ListItem";
import NotFound from "./404";
import { withRouter } from "react-router";

class Master extends Component {
  constructor(props) {
    super(props);
    console.log(this.props);
  }
  render() {
    const { match } = this.props;
    console.log("match", match);
    return (
      <Fragment>
        <h2>Master Item</h2>
        <BrowserRouter>
          <div className="container">
            <Switch>
              <Route path={`${match.path}/new`} component={NewItem} />
              <Route exact path={`${match.path}`} component={ListItem} />
              <Route path="*" component={NotFound} />
            </Switch>
          </div>
        </BrowserRouter>
      </Fragment>
    );
  }
}
export default withRouter(Master);

ListItem.jsx 

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

class ListItem extends Component {
  render() {
    const { match } = this.props;
    return (
      <Fragment>
        <Link to={`${match.path}/new`}>New Item</Link>

        <h2>List Item</h2>
      </Fragment>
    );
  }
}

export default ListItem;

Проблема в том, что маршрут по умолчанию (элемент списка) не перерисовывается, когда моя навигация возвращается к главному маршруту со страницы нового элемента.

Здесь это мои коды и ящик https://codesandbox.io/s/react-bootstrap-3cpsd

спасибо

1 Ответ

1 голос
/ 18 июня 2020

В дочернем компоненте вместо использования React-Router вы можете просто визуализировать событие onclick 

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

class ListItem extends Component {
  constructor(props){
    super(props);
    this.state.isClicked = false;

  }
 handleClick = () => {
   this.stateState({isClicked: true});
};
  render() {
    const { match } = this.props;
    return this.state.isClicked ? (
      <Parent />
    ): (
<Fragment>
        <Link onClick={this.handleClick}>New Item</Link>

        <h2>List Item</h2>
      </Fragment>
);
  }
}

export default ListItem;
...