Question

我无法在除“/”之外的任何路线上渲染任何组件。这是我的routes.js代码

 import React from 'react'
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
} from 'react-router-dom'
import StockTable from './containers/stockTableContainer';
import StockDetail from './containers/stockDetailContainer';

export const getRoutes = (store) => {
 return(
     <Router>
    <div>
        <Route exact path ='/' component ={StockTable}/>
        <Route  path ='/details' component ={StockDetail}/>
    </div>
    </Router>
    )
  }

我可以在“/”路线上渲染StockDetail组件，但我无法在“/ details”上路由它。

我也尝试使用但仍然无法呈现“/ details”

完整代码：https://github.com/shrutis18/stockApp

Answer 1

您可以按照文档

中的指示将Switch用于您的路线

<Switch>
   <Route path='some_path' component={Some component} />
</Switch>

errors

Answer 2

如果您的应用程序托管在静态文件服务器上，则需要使用<HashRouter>而不是<BrowserRouter>。

这是因为您的服务器不知道如何处理对/以外的路径发出的请求。要使BrowserRouter生效，任何可路由的请求都应该在index.html。

中提供

FAQ

的摘录

加载托管在静态文件上的网站的根页面时   服务器（例如http://www.example.com），可能会出现<BrowserHistory>   上班。但是，这只是因为当浏览器制作时   请求根页面，服务器以root用户响应   index.html文件。

如果您通过根页面，应用内导航加载应用程序   将起作用，因为实际上没有向服务器发出请求。这个   表示如果您加载http://www.example.com并单击指向的链接   http://www.example.com/other-page/，您的应用程序将匹配并且   渲染/ other-page / route。

但是，如果要更新a，最终会出现空白屏幕   非根页面（或只是尝试直接导航到它）。开放   您的浏览器的开发人员工具，您将看到一个错误消息   控制台通知您无法加载页面。这是   因为静态文件服务器实际上依赖于所请求的文件   现有

进一步沿着

行

当您的服务器可以响应动态请求时，这不是问题。在这种情况下，您可以指示服务器捕获所有请求并提供相同的index.html文件。

反应不会路由到“/”路由以外的其他路由

2 个答案: