在我较早的教程之一中，我学习了React和JSX的使用方法。 本教程介绍如何开始设置和创建react APP应用程序。 重点介绍如何使用React-router在react APP应用程序中处理路由。
首先，让我们使用nodepackagemanager(NPM )启动项目。
mkdirreactroutingappcdreactroutingappnpminit安装项目所需的react和react-dom库。
npm install react react-dom --save此项目使用web包模块绑定程序。 安装web包和web包开发服务器。
npminstallwebpackwebpack-dev-server-- save-dev我们使用Babel将JSX语法转换为JavaScript。 在我们的项目中安装以下babel包。
NPM安装----save-dev babel-core babel-loader babel-preset-react babel-preset-es 2015 web pack-dev-server配置有
module.exports={ entry : './app.js '，module : { loaders : } { exclude 3360/node _ modules /，loader 333653650 接下来，创建用于呈现react APP应用程序的app.html。
hmlheadtitletutsplus-reactroutingbasic/title/headbodydivid=' app '/divscriptsrc=' bundle.js '/script/body /
导入react from ' react '； 导入{ render } from ' react-DOM '； const app=((return ) H2 ) tutsplus-welcometoreactroutingbasic！ ' (/H2 )； (； render(app/，document.getelementbyid('app ' )； 如上所示，引入了react和react-dom。 我们创建了一个名为App的无状态组件来返回标题。 render函数在app.html页的app元素中渲染组件。
启动web包服务吧。 应该正在运行APP应用程序，并显示来自组件的消息。
webpack-dev-server将浏览器指向http://localhost:8080/app.html。 此APP应用程序应该已经在运行。
创建React视图启动并执行react APP应用程序。 首先，创建React路由APP应用程序的几个视图。 为了简化app.js，请在同一app.js文件中创建所有组件。
让我们在app.js中创建一个名为navigation的主要组件。
const Navigation=() return ) sectionapp/ulLi ) (home )/LiLi ) (contact ) }/LiLi ) (about )/Li/sectact (； 上述Navigation组件包含APP应用程序的标题，以及为导航到APP应用程序的不同屏幕而创建的新菜单。 该组件非常简单，并带有基本的HTML代码。 继续创建“联系方式”和“信息”画面吧。
常数about=(
=> { return ( <section> <h2>{'Welcome to About!'}</h2> </section> );};const Contact = () => { return ( <section> <h2>{'Welcome to Contact!'}</h2> </section> );};我们刚刚创建了一个组件来呈现“ About和“ Contact屏幕。
使用react-router连接视图为了连接不同的视图，我们将使用react-router 。 使用npm安装react-router 。
npm install react-router --save从app.js react-router导入所需的库。
import {Link, Route, Router} from 'react-router';我们将为应用程序定义不同的路由，而不是指定要呈现的组件。 为此，我们将使用react-router 。
让我们为“主页”屏幕，“联系人”屏幕和“关于”屏幕定义路线。
render( <Router> <Route component={Navigation} path="/" /> <Route component={About} path="/about" /> <Route component={Contact} path="/contact" /> </Router>, document.getElementById('app'));当用户访问/路线时，将呈现“ Navigation组件，访问/about将呈现“ About组件，而/contact呈现“ Contact组件。
修改“ About和“ Contact屏幕，以包括指向主屏幕的链接。 对于链接屏幕，我们将使用Link ，它的工作方式与HTML锚标记相似。
const About = () => { return ( <section> <h2>{'Welcome to About!'}</h2> <Link to="/">{'Back to Home'}</Link> </section> );};const Contact = () => { return ( <section> <h2>{'Welcome to Contact!'}</h2> <Link to="/">{'Back to Home'}</Link> </section> );};修改Navigation组件，使其包含从主屏幕到其他屏幕的链接。
const Navigation = () => { return ( <section> <App /> <ul> <li>{'Home'}</li> <li> <Link to="/contact">{'Contact'}</Link> </li> <li> <Link to="/about">{'About'}</Link> </li> </ul> </section> );};保存更改并重新启动webpack服务器。
webpack-dev-server将浏览器指向http：// localhost：8080 / app.html ，您应该使应用程序以基本路由运行。
包起来在本教程中，我们看到了如何开始创建React应用程序以及如何使用react-router将不同的组件连接在一起。 我们学习了如何定义不同的路由并使用react-router将它们链接在一起。
您是否尝试过使用react-router或任何其他路由库？ 请在下面的评论中告诉我们您的想法。
该教程的源代码可在GitHub上获得 。
翻译自: https://code.tutsplus.com/tutorials/understanding-how-to-handle-routing-in-react--cms-27355