CODEWITHSUNDEEP
reactjsreact-router-dom
claudiopb
claudiopb

Reputation: 1100

ReactJS - issue about react-router-dom

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>
)

Upvotes: 0

Views: 269

Answers (1)

nucleartux
nucleartux

Reputation: 1400

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} />

Upvotes: 1

Related Questions