ReactJS

Question

我有一个 <Routes> 组件，它只渲染一个 <Dashboard> 组件。当我尝试获取 <BillingCycle> 组件时，并没有发生同样的事情。当我在可能获取 BillingCycle 页面的浏览器中输入 url 时，Billing Cycles 内容没有出现。继续显示仪表板内容。我错了什么？谢谢你。

导入'../common/template/dependencies' 从 'react'

导入 React

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

import Routes from './Routes'

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

这是成功出现在这些 url 中的仪表板组件：http://localhost:8080 and http://localhost:8080/#/

import React from 'react'

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

这里是 billingCycle 组件，当我对其 url 进行数字化时没有出现： 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>
)

Answer 1

如果你想在 URL 中使用散列，你应该使用 HashRouter。而且你不应该向路由添加哈希：

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

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

ReactJS - issue about react-router-dom

react-router-dom