ReactJS - issue about react-router-dom

Question

I have a <Routes> component that is rendering only a <Dashboard> component. The same thing isn't happening when I try to fetch the <BillingCycle> component. The Billing Cycles content isn't appearing when I digit the url in the browser that might fetch the BillingCycle' page. There is continuing showing the Dashboard Content. What do I mistake? Thank you.

import '../common/template/dependencies' import React from 'react'

here is the parent component that imports the Routes component.

import Routes from './Routes'

    export default (props) => (
      <div className='wrapper'>  
        <div className='content-wrapper'>
         <Routes />
        </div>
      </div>
    )

here is the Dashboard component that is successfully appearing in these urls: http://localhost:8080 and http://localhost:8080/#/

import React from 'react'

export default props  => (
  <div>
    <h1>Dashboard</h1>
  </div>
)

here is the billingCycle component that isn't appearing when I digit its url: http://localhost:8080/#/billingCycles

import React from 'react'

export default props => {

  return (
   <h1>Ciclo de pagamentos</h1>
  )
}

Here is the Routes component:

import React from 'react'
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';

import Dashboard from '../dashboard/Dashboard'
import BillingCycle from '../billingCycle/BillingCycle'

export default props => (
  <Router>
    <Switch>      

      <Route exact path='#/billingCycles' component={BillingCycle} />
      <Route exact path='/' component={Dashboard} />
      <Redirect from='*' to='/' />
    </Switch>
  </Router>
)

In order to do that you must do it with server side render or also called isomorphic. — vitomadio
– vitomadio, Commented Mar 3, 2019 at 18:45

nucleartux · Accepted Answer · 2019-03-03 18:44:34Z

1

If you want use hash in URL you should use HashRouter. And you shouldn't add hashes to routes:

<Route exact path='/billingCycles' component={BillingCycle} />

answered Mar 3, 2019 at 18:44

nucleartux

1,4001 gold badge14 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

claudiopb Over a year ago

what is it? hashRouter? some dependency? can you please explain to me how do I implement it

nucleartux Over a year ago

Description and examples are in official documentation reacttraining.com/react-router/web/api/HashRouter

claudiopb Over a year ago

I did a test replacing /#/billingCycles for /billingCycles and it didn't work there appeared an error message: Cannot GET /billingCycles in this url localhost:8080/billingCycles

nucleartux Over a year ago

I made little example for you: codesandbox.io/s/j22067pw03?fontsize=14. You can change url to /#/billingCycles and route will change.

Collectives™ on Stack Overflow

ReactJS - issue about react-router-dom

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related