ReactJS-关于react-router-dom的问题

时间:2019-03-03 18:38:27

标签: reactjs react-router-dom

我有一个<Routes>组件,该组件仅呈现<Dashboard>组件。当我尝试获取<BillingCycle>组件时,不会发生相同的事情。当我在可能会获取BillingCycle页面的浏览器中输入网址时,不会出现Billing Cycles内容。继续显示仪表板内容。我有什么错?谢谢。

导入'../common/template/dependencies' 从“反应”导入React

这是导入Routes组件的父组件。

import Routes from './Routes'

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

以下是成功显示在以下网址中的仪表板组件:http://localhost:8080http://localhost:8080/#/

import React from 'react'

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

这是我输入网址时未出现的billingCycle组件: http://localhost:8080/#/billingCycles

import React from 'react'

export default props => {

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

以下是“路线”组件:

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

1 个答案:

答案 0 :(得分:1)

如果要在URL中使用哈希,则应使用HashRouter。而且您不应该在路由中添加哈希:

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