React Router深层链接 [英] React Router deep linking

问题描述

这是我第一次使用React和React Router，并且遇到了一些深层链接问题.我已经建立了一个简单的SPA，并且在React Router的帮助下，我可以导航到mysite.com/work，mysite.com/about和mysite.com/work/:projectid.如果我从站点的根目录开始(例如，mysite.com并单击工作")，则可以毫无问题地导航到这些页面.我遇到的问题是深层链接(手动输入mysite.com/about或刷新mysite.com/about上的页面).所有这些都可以在我的本地主机上运行，​​但不能在托管站点(顺便说一句，托管在GitHub页面上)上.

This is my first time using React and React Router, and I am running into some deep linking issues. I've build a simple SPA, and with the help of React Router, I can navigate to mysite.com/work, mysite.com/about, and mysite.com/work/:projectid. I have no problem navigating to these pages if I start at the root of the site (mysite.com and clicking on 'Work', for example). The problem I am running into is deep linking (manually entering mysite.com/about or refreshing the page on mysite.com/about). This all works on my localhost but not on the hosted site (which, btw, is hosted on GitHub pages).

这是因为我正在使用GitHub页面托管网站吗?还是这是React Router的问题?

Is this because I am using GitHub pages to host my site? Or is this an issue with React Router?

这是main.js的一部分:

Here is part of main.js:

var routes = (
    <Router history={history}>
        <Route path="/" component={App}>
            <IndexRoute component={Work} />
            <Route path="/work" component={Work} />
            <Route path="/work/:id" component={ProjectDetail} />
            <Route path="/about" component={About} />
        </Route>
        <Route path="*" component={NotFound} />
    </Router>
);

ReactDOM.render(routes, document.getElementById('main'));

推荐答案

您可以从根目录遍历该站点，因为路由全部由react-router处理，而react-router是从根站点的js文件加载的.

You can traverse the site from your root since the routing is all handled by react-router which loaded from your root site's js files.

/about/index.html中没有html文件. gh-pages托管静态站点，并且如果没有html文件就转到mysite.com/about，它可能会给您404.

There is no html file located in /about/index.html. gh-pages hosts static sites, and if you go to mysite.com/about without having the html file, it will probably give you a 404.

如果您使用的是webpack，请尝试使用 https://github.com /markdalgleish/static-site-generator-webpack-plugin .

If you're using webpack, try using https://github.com/markdalgleish/static-site-generator-webpack-plugin.

这篇关于React Router深层链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！