React Router 深度链接
React Router deep linking
这是我第一次使用 React 和 React Router,我 运行 遇到了一些深层链接问题。我构建了一个简单的 SPA,在 React Router 的帮助下,我可以导航到 mysite.com/work、mysite.com/about 和 mysite.com/work/:projectid。如果我从站点的根目录开始(例如 mysite.com 并单击 'Work',我可以毫无问题地导航到这些页面。我 运行 遇到的问题是深层链接(手动输入 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'));
您可以从根站点遍历站点,因为路由全部由从根站点的 js 文件加载的 react-router
处理。
/about/index.html
中没有 html 文件。 gh-pages
托管静态站点,如果您在没有 html 文件的情况下访问 mysite.com/about
,它可能会给您一个 404。
如果您使用的是 webpack,请尝试使用 https://github.com/markdalgleish/static-site-generator-webpack-plugin。
这是我第一次使用 React 和 React Router,我 运行 遇到了一些深层链接问题。我构建了一个简单的 SPA,在 React Router 的帮助下,我可以导航到 mysite.com/work、mysite.com/about 和 mysite.com/work/:projectid。如果我从站点的根目录开始(例如 mysite.com 并单击 'Work',我可以毫无问题地导航到这些页面。我 运行 遇到的问题是深层链接(手动输入 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'));
您可以从根站点遍历站点,因为路由全部由从根站点的 js 文件加载的 react-router
处理。
/about/index.html
中没有 html 文件。 gh-pages
托管静态站点,如果您在没有 html 文件的情况下访问 mysite.com/about
,它可能会给您一个 404。
如果您使用的是 webpack,请尝试使用 https://github.com/markdalgleish/static-site-generator-webpack-plugin。