0

Im working on a proyect Using electron-react-boilerplate, react-hooks and Context.

I have the issue on react-router-dom. Every path defined behind '/', navigation wont work, otherwhise it works properly.

I tryed adding exact attribute on it, but first page stoped rendering

Here is my code:

Index.js:

 import React, { Fragment } from 'react';
    import { render } from 'react-dom';
    import './app.global.css';
    import App from './App';

    render(<App />, document.getElementById('root'));

App.js:

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import PruebaContext from './pruebas/Context';
import Navigator from './Routes'




function App() {
  const Hola = 'hola';
  const [monja, setMonja] = useState();
  const setMonjaFunc = monjaData => {
    setMonja(monjaData);
  };

  return (
    <PruebaContext.Provider value={{ Hola, monja, setMonjaFunc }}>
      <Navigator />
    </PruebaContext.Provider>
  );
}

export default hot(module)(App);

And here is the Issue, on Routes.js:

 import React from 'react'
import {Router, Route, Switch, } from 'react-router-dom';
import history from './pruebas/History';
import Second from './components/Second';
import Home from './components/Home';
import Third from './components/Third'


const Navigator = () => {

  return(
      <Router history={history}>
        <Switch>
          <Route  path='/Second' component={Second}/>
          <Route  path='/Third' component={Third} />
          <Route  path='/'  component={Home}/>
        </Switch>
      </Router>
  )
}

export default Navigator;

and Home.js:

import React, { useEffect, useContext } from 'react';
import styles from './Home.css';
import PruebaContext from '../pruebas/Context';
import { Link, useHistory } from 'react-router-dom';
import Counter from './Counter';

const Home = () => {
  const Context = useContext(PruebaContext);
  const history = useHistory();

  useEffect(() => {
    console.log(Context.Hola);
    Context.setMonjaFunc('adios');

  }, []);
  const DoSomething = () => {
    console.log('do');
    Context.setMonjaFunc('1');
  };
  const DoSomethingTwo = () => {
    console.log('2');
    Context.setMonjaFunc('2');
  };
  //NAVIGATION 1ST TRY
  const Nav = () => {
    history.push('/Third')
  }

  return (
    <div className={styles.container} data-tid="container">
      <button type="button" onClick={DoSomethingTwo}>2Bum</button>
      <button type="button" onClick={DoSomething}>bum</button>
      <button type="button" onClick={Nav}> n</button>
      <h2>Home</h2>
      <h2>{Context.Hola}</h2>
      <h2>{Context.monja}</h2>
      {/* NAVIGATION 2ND TRY */}
      <Link to='/Second' >Go to second</Link>
    </div>
  );
};

export default Home;
  • 3
    You said that you've tried using exact, could you show us how? In my opinion it should work. Did you move it to the first place then? This answer explains that pretty well: https://stackoverflow.com/a/49162423/5069352 – Morishiri Dec 19 '19 at 07:17
  • @Morishiri Yes, First issue, Adding This, wont get the page rendered. Second Issue, (not using exact) Navigation does only work if Home component is defined behind other pages as you can see in the Routes.js. Im really guessing the trouble is with Home page, other pages works propperly even adding exact or not. – Julen Kakatua Dec 19 '19 at 16:42
  • @Morishiri edit: Tried making "Second" page as main page and got same Issues – Julen Kakatua Dec 19 '19 at 16:51
  • 1
    This solved my problem! Thanks. – Pepito Fernandez Jun 23 '20 at 19:35

0 Answers0