在生产中处理 React Routing

2020-10-06 08:00:00 · 飞浪

本指南介绍如何解决使用 React Router 或 HTML5 历史记录 API 的 React 应用中出现的页面未找到错误。

介绍

如果您正在阅读本文，则很有可能您已经部署了第一个使用 React Router 或 HTML5 history API 的 React 应用，并且输入到浏览器中的路由直接返回了页面未找到错误。在本指南中，您将了解此问题的原因以及如何解决它。

构建示例应用程序

为了复制该问题，您将构建并部署一个包含两个页面的简单 React 应用。首先，在终端中输入以下命令，使用 Create React App 创建您的 React 开发环境。

      npx create-react-app [YOUR_APP_NAME]

接下来添加 react-router-dom 作为依赖项

      yarn add react-router-dom

添加路线

创建一个 Routes.js 文件并添加以下内容以创建主页和关于页面路由。

      import React from 'react'
import { Route,Switch, BrowserRouter as Router } from 'react-router-dom'
import { Home, About } from './app.js';

const Routes = () => { 
    return (
     <Router>
				<Switch>
						<Route exact path='/' component={Home}/>
						<Route exact path='/about' component={About}/>
				<Switch/>
		 </Router>
		);
};

export default Routes;
    

现在使用以下代码为主页和关于页面创建组件。

      import React from 'react';

const Home = () => {
	return(
		<p>Homepage</p>
	);
}

const About = () => {
	return(
		<p>About</p>
	);
}

export default {Home , About}
    

不要忘记将路由组件添加到index.js页面

      import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";

ReactDOM.render(
    <React.StrictMode>
            <Routes />
    </React.StrictMode>,
    document.getElementById("root")
);
    

部署您的应用程序

部署 React 应用的方法有很多种。在本指南中，您将使用render.com。但在部署之前，请运行构建脚本并将生产构建推送到 GitHub 存储库。接下来，访问 render.com 并创建一个帐户（如果您没有帐户）。

按照以下步骤部署你的应用：

在您的render.com仪表板上添加一个新的 Web 服务。
将您的 repo 连接到您刚刚创建的 Web 服务。
部署应用

访问“关于”页面。它不起作用，因为在生产环境中，服务器会查找文件/about，而该文件实际上并不存在。

修复问题

要修复此问题，需要配置服务器，以便对任何路由的请求都将在生产版本中提供给index.html文件。如果您使用express.js，可以按如下方式完成。

      app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req,res) {
		res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
    

对于你的情况，render.com有一个简单的解决方案。在你的应用程序的仪表板上，单击“重定向/重写”选项卡并添加以下内容：

      # Source: /*
# Destination: /index.html
# Action: Rewrite
    

现在保存更改并再次部署您的应用以确保万无一失。您的路线现在应该可以完美运行了。

结论

瞧！你现在就是 React 大师了。如果你想阅读更多有关在生产环境中使用 Create React App 路由的信息，请访问官方文档。如果你想进一步了解，请在 Twitter 上关注我 @ DesmondNyamador。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在生产中处理 React Routing

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react' import { Route,Switch, BrowserRouter as Router } from 'react-router-dom' import { Home, About } from './app.js'; const Routes = () => { return ( <Router> <Switch> <Route exact path='/' component={Home}/> <Route exact path='/about' component={About}/> <Switch/> </Router> ); }; export default Routes;

import React from "react"; import ReactDOM from "react-dom"; import Routes from "./Routes"; ReactDOM.render( <React.StrictMode> <Routes /> </React.StrictMode>, document.getElementById("root") );