Скрыть текущий компонент перед рендерингом компонента, связанного с Navlink - React Router - PullRequest
Новая
       23

Скрыть текущий компонент перед рендерингом компонента, связанного с Navlink - React Router

0 голосов
/ 17 апреля 2020

Я создаю одностраничное веб-приложение на основе реагирующей маршрутизации, в котором я хочу скрыть текущий компонент перед рендерингом следующего компонента, который должен отображаться после нажатия на ссылку, как <a href="someLink"> в html. Однако мой текущий компонент не исчезает, и следующий компонент отображается на той же странице рядом с текущим компонентом.

мой код для приложения. js (Основной файл, в котором отображается родительский класс) 

import React from 'react';
import {Parent} from './Parent';
import {  BrowserRouter as Router,  Route,  NavLink} from 'react-router-dom';
function App() {

  return (
    <div className="App">
      <header className="App-header">
        <Router>
        <NavLink to="/Edit">Edit</NavLink>
        <Route path="/Edit" component={Edit}/>

      </Router>
      </header>

    </div>
  );
}

export default App;

Вот мой код для родителя. js - 

import React from 'react';
import {Child} from './Child';
import { BrowserRouter as Router,  Route,  NavLink} from 'react-router-dom';
class Parent extends React.Component{
    constructor(props) {
        super(props);

      } 
    render(){
       return(
        <div>
       <p>Parent Render</p>
        <Router>
        <NavLink to="/Parent/Child">Child</NavLink>
        <Route path="/Parent/Child" component={Child}/>
        </Router>
)
     }
}
export {Parent}

Child. js

import React from 'react';
class Child extends React.Component{
    constructor(props) {
        super(props);

      } 
    render(){
        return(
         <div>
             Child Render
             </div>
        )}
}
export{Child}

В приложении нет проблем. js. Проблема в том, что при щелчке по дочерней навигационной ссылке родитель не исчезает

1 Ответ

1 голос
/ 17 апреля 2020

Я думаю, что лучший способ приблизиться к этому, это обернуть ваше приложение. js компонент с BrowserRouter внутри вашего индекса. js файл вот так. 

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

И впоследствии вы можете обновить компоненту App. js со всеми маршрутами, которые вы хотите иметь, обернув все компоненты в компоненте Route следующим образом. 

//App.js
import React from "react";
import { Parent } from "./Parent";
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
import Home './Home'
import Edit from './Edit'
import Parent from './Parent'


function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/Edit" component={Edit} />
        <Route path="/parent" component={Parent} />
      </Switch>
    </div>
  );
}

export default App;

Теперь вам не нужно оборачивать дочерние компоненты <Router />, вы можете создать столько же <Routes /> в приложении. js и использовать <Link /> для перехода по этим ссылкам.

...