Как заставить компонент отключиться при переходе на новую страницу в React? - PullRequest
Новая
       21

Как заставить компонент отключиться при переходе на новую страницу в React?

0 голосов
/ 29 августа 2018

У меня есть домашняя страница со ссылкой на форму, например: 

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  NavLink,
  Redirect,
  Switch,
  withRouter
} from "react-router-dom"; 
import addHand from './Forms/addHand'

export class Home extends Component { 

  render() { 
      return ( 
        <div> 
          <Router> 
          <div>
          <NavLink to= '/hands/new'> Add a new hand </NavLink> 
          <Route path= '/hands/new' component={addHand}/> 
          <h4> Search For Hands By Category </h4> 
          <h4> Search For Sessions By Category </h4> 
          <h4> Search For Tables By Category </h4> 
          </div> 
          </Router>
        </div> 
      ); 
  }
} 

export default Home;

У меня также есть навигационная панель со ссылкой для перехода домой с любой страницы, например: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';  
import unmountComponentAtNode from 'react-dom';

class NavBar extends Component { 

  render() {
    return (
      <div className="navbar"> 
        <NavLink className="link"
        to="/"
        exact 
      >Home</NavLink> 
      </div>
    ); 
  }
};

export default NavBar;

Если я перейду к форме, затем передумаю и решу, что хочу вернуться на домашнюю страницу, URL-адрес изменится, когда я нажму навигационную ссылку, но форма все еще будет отображаться на домашней странице. Я могу продолжать перемещаться между маршрутами, но единственный способ заставить форму отключиться от DOM - это обновить страницу. Что вызывает такое поведение, и что я могу сделать, чтобы это исправить? Я уже сталкивался с подобными проблемами в React, но так и не нашел решения. Спасибо!

Редактировать ** Я попытался добавить это к ссылке: 

render() {

const refCallback = node => {
  unmountComponentAtNode(node)
}

return (
  <div className="navbar"> 
    <NavLink className="link"
    to="/"
    exact 
    innerRef={refCallback}
  >Home</NavLink> 
  </div>
); 
}
};

в соответствии с документами реагирующего маршрутизатора, но это дает мне эту ошибку:

unmountComponentAtNode (...): целевой контейнер не является элементом DOM.

Вот код в app.js 

import React, { Component } from 'react';
import './App.css'; 
import { Router, Route } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import Home from './Components/Home'
import Navbar from './Components/Navbar';
import addHand from './Components/Forms/addHand';

export const history = createBrowserHistory();

class App extends Component {
  render() {
    return (
     <div className="App">
        <header className="App-header">
          <h1 className="App-title-top">Hi Adam, welcome to your Personal 
Poker Universe!</h1> 
          <h1 className="App-title-middle">Not Adam? GTFO!</h1> 
          <h1 className="App-title-bottom">Just Kidding, you can stay</h1>
        </header> 
        <Router history= {history}> 
          <div>
        <Navbar/> 
        <Route exact path='/' component= {Home} />   
        </div>
        </Router>
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 29 августа 2018

Определите один Router в вашем App.js: 

<Router history={history}>
  <Switch>
    <Route exact path="/" component={Home} />} />
    <Route  path="/hands/new" component={addHand} />
    </Switch>
</Router>

тогда попробуйте перемещаться между маршрутами, это должно работать. Пожалуйста, дайте мне знать, если это не сработает

...