这是我第一次使用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页面上)上。
这是因为我使用GitHub页面托管网站吗?还是这是React Router的问题?
这是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从根站点的js文件加载的路由处理。
react-router
中没有html文件/about/index.html。gh- pages托管静态网站,如果您mysite.com/about没有html文件就转到该网站,则可能会显示404。
/about/index.html
gh- pages
mysite.com/about
如果您使用的是webpack,请尝试使用https://github.com/markdalgleish/static-site-generator- webpack-plugin。