0

I kinda need an advice here ... I'm learning how to build a full app based on react. Here is the test app : https://codesandbox.io/s/cranky-platform-46sjl

Using React , Redux, Saga and typescript.

Everything work so far except the routing :

-Custon event are fired : onClick={() => redirectRequest('/')}

-When I manually try to access an url : /starwars for example : that work

-The router event is fired too in redux devtool : https://snipboard.io/uWaokq.jpg

-The Url change and the {location} in props + state is updated

-The view is not updating --> don't show the other components

I checked a lot of github issues / other stack questions but nothing seem to make it work so far. Maybe you guy will have an idea of what I am missing here.

Thanks for your time !

Slater
  • 817
  • 2
  • 10
  • 16
  • Can you present the app in a codesandbox? In codesandbox.io –  Apr 24 '20 at 15:40
  • Done :) Didn't knew that it was simple to do it from a git ;) – Slater Apr 24 '20 at 15:50
  • Are you defining which component to render for an URL? –  Apr 24 '20 at 15:56
  • /src/app/features/router/router.component.tsx --> Yep : there Each button fire an action to saga that take care of the redirection : /src/app/store/sagas/router.saga.ts – Slater Apr 24 '20 at 16:00
  • When you try to access https://46sjl.csb.app/starwars --> it work. But not with the click on the button – Slater Apr 24 '20 at 16:04
  • Try using another component of react-router-dom. Add "import { NavLink } from 'react-router-dom';" and "return (Home)" in the render. – Roberto C. Rodriguez-Hidalgo Apr 24 '20 at 17:37
  • Or if you want to navigate programmatically using react-router-dom, you can do `history.push('/mypage')` –  Apr 25 '20 at 09:42

1 Answers1

0

Use NavLink as imported from react-router-dom

import { NavLink } from 'react-router-dom';

Later use it as follows in your render function

render () {
    return (
        ...
                <NavLink className="navlink" to="/">Home</NavLink>
        ...
    )
}