React Js 客户端路由类似于 Angular 路由或 stateRouter

Posted 2023-02-21

【中文标题】React Js 客户端路由类似于 Angular 路由或 stateRouter

【英文标题】：React Js client side routing similar to angular routing or stateRouter

【发布时间】：2016-11-23 15:32:57

【问题描述】：

我来自 Angular 背景，现在正在研究 ReactJs。我成功地开始理解思考的组件逻辑，并且我试图用角度来可视化它，现在我想知道如何为几乎不消耗 REST api 的单页应用程序实现路由。我看了react-router，这些例子谈论的是服务器端渲染（或者我这样理解，我不知道安装什么 npm，我想我们像在 angular 中那样向 html 添加一个 js 并配置路由？），我没有写同构js暂时。谁能帮我学习如何在 ReactJs 中实现客户端路由，或者如果我完全被误解了，请指导我

【参考方案1】：

ReactJS 支持服务器端和客户端路由（单页应用程序）。使用 react-router hashHistory 或 browserHistory 进行客户端路由

import  Router, Route, IndexRoute, Link, IndexLink,hashHistory, browserHistory  from 'react-router'

render((
	  <Router history=browserHistory>
		<Route path="/" component=Root>    
				<IndexRoute component=HomePage/>
				<Route path="login" component=LoginPage />    
				<Route path="blog" component=BlogPage /> 
				<Route path="about" component=AboutPage /> 
				<Route path="logout" component=LogoutPage onEnter=onLogoutEnter/> 
		</Route>
	  </Router>
), document.getElementById('container'))

【讨论】：

'react-router' 你从哪里得到这个包，这是从 npm 安装的吗？

是的。 npm install --save react-router

我不想使用npm install，我可以通过添加html并在js中使用它来使用lib吗？

如果您正在创建单页应用程序。使用 webpack 或 browserify 生成单个包文件。

我按照官方指南中的这些教程进行操作，这里他们不使用 npm facebook.github.io/react/docs/getting-started.html 如果我添加了您指出的上述链接并尝试在上面使用您的代码，则会抛出“未捕获的 ReferenceError：未定义要求” '