Question

我们有旧的反应网页应用程序有两页。 test1.html 的test.html 我们访问http://domain/test1.html?somequeryparams＆amp; http://domain/test2.html?somequeryparams

现在我们为代码拆分实现反应路由，到目前为止，我已经创建了像这样的路由器

import {
    BrowserRouter as Router,
    Route,
    Link,
    Switch
} from 'react-router-dom'

import Loadable from 'react-loadable'
import Loading from './loading'

const Home = Loadable({
    loader: () => import('./home' /* webpackChunkName: 'home' */),
    loading: Loading,
})

const PageOne = Loadable({
    loader: () => import('./pageOne.js' /* webpackChunkName: 'pageOne' */),
    loading: Loading,
})

const PageTwo = Loadable({

    loader: () => import('./pageTwo.js' /* webpackChunkName: 'pageTwo' */),
    loading: Loading,
})

const TestComponent = Loadable({
    loader: () => import ('./TestComponenet.jsx' /* webpackChunkName: 'test' */),
    loading: Loading,
});
const App = () => (
    <Router>
        <div>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/pageOne">Page One</Link></li>
                <li><Link to="/pageTwo">Page Two</Link></li>
                <li><a href="/test.html?foo=1&a=b">Page Test Comp</a></li>
            </ul>

            <hr/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/pageOne" component={PageOne}/>
                <Route exact path="/pageTwo" component={PageTwo}/>
                <Route path="/test.html" component={TestComponent}/>

            </Switch>
        </div>
    </Router>
)

所有组件都打印样本html字符串。但是当我尝试为test.html路由时，找不到Cannot GET /test.html 404页面失败。

我们需要保持此网址与其遗留网址相同。如果我将<a href="/test.html?foo=1&a=b">Page Test Comp</a>更改为<Link to="/test.html?foo=1&a=b">Page Test Comp</Link> 但如果我刷新页面，则会出现404错误。

对于webpack-dev服务器，我甚至添加了：

 devServer: {
    historyApiFallback: {
        historyApiFallback: true,
        rewrites: [
            {from: /.*test.html.*$/, to: 'index.html'}
        ]
    },
    index: 'index.html'
},

我们应该如何匹配这条路线？我错过了什么吗？

Answer 1

通过 BrowserRouter 声明的路由也需要在服务器端实现。

对于E.g - 使用BrowserRouter，如果你有这样的路线 -

<Route exact path="/test.html" component={TestComponent}/>

当您直接点击直接网址http://localhost/test.html时，托管服务器将检查文件test.html是否存在，如果未找到，则会显示以下错误消息 -

Cannot GET /test.html

如果我将Page Test Comp更改为Page Test Comp，但如果我刷新页面则会出现404错误。

当您使用锚标记时，浏览器向托管服务器发出新请求以获取GET test.html，该请求不存在，因此找不到404错误。当使用 link 标记时，浏览器路由器会在内部处理它，并且仅在页面刷新时，浏览器向服务器发出一个新请求，要求test.html - 这给出了404，因为托管服务器上不存在页面test.html。

因此，要回答您的问题，有两种方法可以解决问题 -

将路线声明从/test.html更改为/ test OR
有一个test.html，它引用了生成的web chunk test.js

React Router Match URL包含文件名和查询参数

1 个答案: