React 应用程序在使用参数获取 url 时得到 404答案

【问题标题】：React app gets 404 when fetching url with paramsReact 应用程序在使用参数获取 url 时得到 404
【发布时间】：2018-02-26 05:17:12
【问题描述】：

在我的应用中，我有这样的 React-router：

const App = () => (
  <Router>
    <Route exact path="/" component={Landing} />
    <Route path="/about" component={About} />
    <Route path="/searching/:term" component={Searching} />
  </Router>
 );

 export default App;

每条路线（带或不带参数）都可以在某些句柄（onClick、onChange、onSubmit 等）上正常工作。如果我在浏览器中输入 url（不带参数的路由），例如 mypage.com/about 它正在工作。带有参数的路由（在上面的代码中是第三条路由）不起作用。每次使用参数访问 url 时，我都会收到错误 404。您能帮我解决一下吗？

谢谢。

/* 编辑 */

添加搜索组件：

const Searching = (props) => (
<div>
    <PagesHeader />
    <Container className="pageContainer">
        <Row>
            <Col md={{size: 10, offset: 1}}>
               Searching result for: <b>{props.match.params.term}</b>
            </Col>
        </Row>
    </Container>
    <Footer />
</div>
);
export default Searching;

【问题讨论】：

所以当你去localhostOrWhatever:someport/searching/abcd你得到一个404？
你好@AndrewLi。是的，就像你写的那样。
也许stackoverflow.com/q/27928372/5647260
嗯，我认为这不是同一个问题。我只有带参数的 url 有问题。如果我去 localhost:PORT/about 它工作正常。
你为什么使用 React-router 版本？

标签： reactjs react-router

【解决方案1】：

我为此找到了灵魂。问题只是我的 bundle.js 文件的位置，所以我只需要更改路径。

我遇到的下一个路由问题是在我的应用程序的生产版本中。我在 4.2 版本中使用 React Router。如果我将 url 放到浏览器中，问题只是在生产版本中，它会返回 404。

所以，当我通过单击链接到另一个组件时，一切都很好。当我复制/粘贴某个页面的 url 时，它返回 404。

最好的方法应该是在服务器部分路由（Node.js，例如 Express.js）。我的应用程序完全使用前端路由，并且我的主机不支持 Node.js。后端 (API) 在 Laravel 中。

我的解决方案是将此代码添加到我的主机上的.htaccess 文件中：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

第二种解决方案是 CDN，如 surge.vs 或 GitHub Pages here is fantastic article for this。

也许它对某人有帮助。

【讨论】：