Question

在我的应用程序中，我有这样的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（没有param的路由）到浏览器，例如mypage.com/about它正在工作。具有参数的路线（在上面的代码中是第三条路线）不起作用。每次当我使用param访问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;

Answer 1

我找到了灵魂。问题只出在我的bundle.js文件的位置，所以我不得不改变路径。

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

所以，当我通过点击链接到另一个组件时，一切都很好。当我复制/粘贴某个页面的网址时，它会返回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。

也许对某人有帮助。

使用参数

1 个答案: