反应不路由到“/"以外的其他地方路线 [英] React not routing to other than "/" route

问题描述

我无法在/"以外的任何路径上渲染任何组件.这是我的 routes.js 代码

 从 'react' 导入 React从 'react-dom' 导入 ReactDOM；进口 {BrowserRouter 作为路由器，路线，来自'反应路由器-dom'从 './containers/stockTableContainer' 导入 StockTable；从 './containers/stockDetailContainer' 导入 StockDetail；export const getRoutes = (store) =>{返回(<路由器><div><路由精确路径='/'组件={StockTable}/><路由路径='/details'组件={StockDetail}/>

</路由器>)}

我可以在/"路由上渲染 StockDetail 组件，但我不能在/details"上路由它.

我也试过使用但仍然无法渲染/details"

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

解决方案

如果您的应用程序托管在静态文件服务器上，您需要使用 而不是 .

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

摘自 常见问题

<块引用>

当您加载托管在静态文件上的网站的根页面时服务器(例如，http://www.example.com)， 可能会出现去工作.然而，这只是因为当浏览器使请求根页面，服务器以根响应index.html 文件.

如果通过根页面加载应用，应用内导航将起作用，因为实际上并未向服务器发出请求.这意味着如果您加载 http://www.example.com 并单击链接到http://www.example.com/other-page/，您的申请将匹配和渲染/other-page/路由.

但是，如果您要刷新一个非根页面(或只是尝试直接导航到它).开放您浏览器的开发者工具，您将在控制台通知您无法加载页面.这是因为静态文件服务器实际上依赖于请求的文件存在.

更进一步

<块引用>

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

I am not able to render any component on any route other than "/". Here is my code for 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>
    )
  }

I can render the StockDetail component on "/" route but i can't route it on "/details".

I have also tried using but still couldn't render "/details"

full code at : https://github.com/shrutis18/stockApp

解决方案

If your application is hosted on a static file server, you need to use a <HashRouter> instead of a <BrowserRouter>.

This is because your server doesn't know how to handle requests made to a path other than /. For the BrowserRouter to work, any routable request should be served the index.html.

An excerpt from the FAQ

When you load the root page of a website hosted on a static file server (e.g., http://www.example.com), a <BrowserHistory> might appear to work. However, this is only because when the browser makes the request for the root page, the server responds with the root index.html file.

If you load the application through the root page, in-app navigation will work because requests are not actually made to the server. This means that if you load http://www.example.com and click a link to http://www.example.com/other-page/, your application will match and render the /other-page/ route.

However, you will end up with a blank screen if you were to refresh a non-root page (or just attempt to navigate directly to it). Opening up your browser's developer tools, you will see an error message in the console informing you that the page could not be loaded. This is because static file servers rely on the requested file actually existing.

Further along the lines

This is not an issue when your server can respond to dynamic requests. In that situation, you can instruct the server to catch all requests and serve up the same index.html file.

这篇关于反应不路由到“/"以外的其他地方路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！