React-router url在刷新或手动写入时不起作用

我正在使用React-router，当我点击链接按钮时，它工作得很好，但当我刷新我的网页时，它没有加载我想要的东西。

例如，我在localhost/joblist和一切都很好，因为我到达这里按下一个链接。但如果我刷新网页，我会得到:

Cannot GET /joblist

默认情况下，它不是这样工作的。最初我有我的URL localhost/#/和localhost/#/joblist，他们工作得很好。但我不喜欢这种类型的URL，所以试图删除#，我写道:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

这个问题不会发生在localhost/，这个总是返回我想要的。

这个应用程序是单页的，所以/joblist不需要向任何服务器询问任何事情。

我的整个路由器。

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

当前回答

Preact路由器Preact解决方案

工作与刷新和直接访问

对于那些通过谷歌发现这一点的人，这里有一个preact-router +哈希历史的演示:

const { h, Component, render } = preact; /** @jsx h */
const { Router } = preactRouter;
const { createHashHistory } = History;
const App = () => (
    <div>
        <AddressBar />

        <Router history={createHashHistory()}>
            <div path="/">
                <p>
                    all paths in preact-router are still /normal/urls.
                    using hash history rewrites them to /#/hash/urls
                </p>
                Example: <a href="/page2">page 2</a>
            </div>
            <div path="/page2">
                <p>Page Two</p>
                <a href="/">back to home</a><br/>
            </div>
        </Router>
    </div>
);

斯菲德尔

2017-10-05 12:08:33

其他回答

如果你正在使用Create React App:

你可以在Create React App页面上找到许多主要托管平台的解决方案。例如，我使用React Router v4和Netlify作为前端代码。它只需要在我的公用文件夹中添加一个文件(“_redirects”)，并在该文件中添加一行代码:

/*  /index.html  200

现在，当进入浏览器或有人点击刷新时，我的网站正确地呈现mysite.com/pricing这样的路径。

2017-06-09 22:01:37

这里的答案都非常有用。配置我的Webpack服务器以期望路由对我有效。

devServer: {
   historyApiFallback: true,
   contentBase: './',
   hot: true
},

historyApiFallback为我修复了这个问题。现在路由工作正确，我可以刷新页面或直接输入URL。没有必要担心Node.js服务器上的变通方法。这个答案显然只适用于使用Webpack的情况。

查看我对React-router 2.0 browserHistory在刷新时不工作的回答，了解为什么需要刷新的更详细原因。

2016-05-26 00:26:26

使用HashRouter对我来说也适用于Redux。只需简单地替换:

import {
    Router //replace Router
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
        <Provider store={Store}>
            <Router history={history}> // Replace here saying Router
                <Layout/>
            </Router>
        </Provider>
    </LocaleProvider>, document.getElementById("app"));

registerServiceWorker();

import {
    HashRouter // Replaced with HashRouter
} from "react-router-dom";

ReactDOM.render(
    <LocaleProvider locale={enUS}>
        <Provider store={Store}>
            <HashRouter history={history}> //replaced with HashRouter
                <Layout/>
            </HashRouter>
        </Provider>
    </LocaleProvider>, document.getElementById("app"));

registerServiceWorker();

2020-03-24 14:09:14

如果你在IIS中托管:将此添加到我的webconfig解决了我的问题

<httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
    <remove statusCode="500" subStatusCode="100" />
    <remove statusCode="500" subStatusCode="-1" />
    <remove statusCode="404" subStatusCode="-1" />
    <error statusCode="404" path="/" responseMode="ExecuteURL" />
    <error statusCode="500" prefixLanguageFilePath="" path="/error_500.asp" responseMode="ExecuteURL" />
    <error statusCode="500" subStatusCode="100" path="/error_500.asp" responseMode="ExecuteURL" />
</httpErrors>

您可以为任何其他服务器进行类似的配置。

2017-04-26 08:32:50

如果你使用Apache作为你的web服务器，你可以在你的。htaccess文件中插入这个:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

我正在使用react:“^16.12.0”和react-router:“^5.1.2” 这种方法是万能的，可能是最简单的入门方法。

2016-11-14 15:10:58

React-router url在刷新或手动写入时不起作用

推荐文章

最新文章

标签