`
癫觉士
  • 浏览: 19580 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

React router 配置demo

阅读更多

网上查了很多资料,都没有可以直接拿来用的,大多数是因为版本差异造成的。有时代码看起来没什么两样,偏偏不成功,有的函数这个版本没有,有的需要用另一种方式编写,过程中充满了各种不确定性。当准备放弃的时候居然发现配置成功了。

1.webpack.config.js

    入口文件是hash-route.js(采用commonjs规范编写),通过webpack编译最后导出bundle.js(浏览器能识别的js),为了支持es6语法和采用类继承的方式写react 组件,在js的loader加载器后面添加了查询语句,

es2015是支持es6特性的,react 支持 class extends React.Component{}的写法,不过这个例子中么有采用。

var webpack = require('webpack');
var path=require('path');
var __dirname='./myComponents/build/';
var babelSettings = { presets: ['es2015', 'react'] };

module.exports = {
  entry:['./myComponents/js/hash-route.js'],
  output: {
	  path: __dirname,
	  filename: 'bundle.js'
  },
  resolve: {
    extensions: ['','.js','.jsx','.css'],
    root:  '/node_modules'
  },
  module: {
    loaders: [{
          test: /\.js$/, 
          loader: 'babel?'+JSON.stringify(babelSettings), // loaders can take parameters as a querystring
          exclude: /node_modules/
      }
    ],
    plugins: [
        //允许错误不打断程序
        new webpack.NoErrorsPlugin()
    ]
  }
};

 

2.入口文件

关键部分是history的创建方式,浏览器提示我用 import { hashHistory } from 'react-router',不过没有什么卵用。home about inbox 组件最后都要在App这个组件中预定义的<RouteHandler/>位置呈现

'use strict';
import React from "react";
import ReactDOM from "react-dom";
import {Router,Route,IndexRoute} from 'react-router';
import {createHistory,createHashHistory,useBasename} from 'history';

var App = require('./app');
var About = require('./About');
var Inbox = require('./Inbox');
var Home = require('./Home');

// declare our routes and their hierarchy
//https://zhuanlan.zhihu.com/p/20381597

const history = useBasename(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});

var routes = (
  <Route handler={App} path="/">    
        <Route path="home" component={Home}/>
        <Route path="about" component={About}/>
        <Route path="inbox" component={Inbox}/>
        <IndexRoute component={Home} />
  </Route>
);
  
ReactDOM.render(<Router history={history}>{routes}</Router>, document.querySelector('#app')) 

 3.app.js

 

var React = require('react');
import {Router} from 'react-router';
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
  render () {
    return (
      <div>
        <h1>App</h1>
        <RouteHandler/>
      </div>
    )
  }
});
module.exports = App;

 4.inbox(home,about省略)

import React from "react";

var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
  }
});
module.exports = Inbox;

 5.index.html

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>webpack react-router</title>
  </head>
  <body>
  菜单:
  <a href="#home">home</a>
  <a href="#about">about</a>
  <a href="#inbox">inbox</a>

    <div id='app'></div>
    <script src="build/bundle.js"></script>
  </body>
</html>

 

分享到:
评论

相关推荐

    react-router学习demo

    这个“react-router学习demo”很可能是为了帮助开发者深入理解如何在React项目中实现路由导航功能。React Router 提供了一种声明式的方式来定义路由,使得应用的导航逻辑与UI组件紧密结合。 首先,React Router 有...

    React-Router Demo

    React-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router DemoReact-Router ...

    react+redux+reactRouter+webpack+antd Demo

    这个"react+redux+reactRouter+webpack+antd Demo"是一个综合性的项目,它展示了如何将这些技术有效地整合在一起,创建出一个功能完备的前端应用。 **React** 是一个由Facebook开发的用于构建用户界面的JavaScript...

    react-router-dom-demo

    本项目"react-router-dom-demo"专注于演示如何在React应用中利用`react-router-dom`进行页面间的数据传递。 首先,我们要理解`react-router-dom`中的`Link`组件。`Link`是`react-router-dom`提供的一个组件,用于在...

    react入门demo(react18 + react-router6)

    这个"react入门demo"基于React 18和React Router 6,是学习和理解这两个核心技术的好起点。React 18带来了性能优化和一些新的API,而React Router 6则提供了在React应用中管理路由的方法。 React 18的更新主要包括...

    react-React简单入门demo

    这个"react-React简单入门demo"应该是包含了一个基本的React待办事项应用的示例,可以帮助初学者快速理解React的基本概念和工作流程。 1. **React基本概念**: - **JSX**:React引入了一种叫做JSX的语法,它允许...

    React 简单demo

    在这个"React简单demo"中,我们将深入探讨如何使用`create-react-app`工具创建一个基础的React项目,并集成路由配置,这对于初学者来说是一个很好的实践起点。 首先,`create-react-app`是一个官方提供的脚手架工具...

    react-router-demo:基于react的路由demo

    在`react-router-demo-master`这个压缩包中,我们可以看到项目结构和相关文件,比如`App.js`可能包含上述组件的实例,展示了如何配置和使用路由。此外,还有可能有其他示例路由页面,如`Home.js`、`About.js`等,...

    react-router-demo:项目演示使用了React Router库

    与API后端集成节点Ruby on Rails 在开发中代理API请求手动配置代理在开发中使用HTTPS 在服务器上生成动态&lt;meta&gt;标记预渲染为静态HTML文件将数据从服务器注入页面运行测试文件名约定命令行界面版本控制集成...

    react的一些demo

    本压缩包"react_demo"包含了一些经典的React示例,非常适合React初学者用来学习和理解React的基本概念和用法。 1. **React组件**:React的核心思想是组件化,每个组件都是独立的、可复用的代码块,可以像拼积木一样...

    react网易云demo

    这个“react网易云demo”很可能是用React技术实现的网易云音乐Web应用的示例项目。让我们深入了解一下React及其在创建此类应用程序中的应用。 React的核心概念是组件化。组件是可重用的代码块,它们可以独立于其他...

    react-redux demo

    npm install 安装, npm run server 启动,这个资源是一个简单的react-redux搭建的demo。详细搭建步骤可以参考https://blog.csdn.net/qq_40621718/article/details/80170368

    react项目demo

    通过深入研究这个"react项目demo",开发者不仅能学习到React的基本用法,还能掌握如何与其他流行库如Redux和React Router协同工作,从而提升开发大型复杂Web应用的能力。同时,这也是一个很好的实践平台,可以帮助...

    react-基于createreact的react全家桶架构demo

    本项目是一个基于`create-react-app`构建的React应用示例,旨在展示一个完整的React生态系统,包括React、Redux、Immutable.js、React Router 4以及Jest测试框架的集成和使用。这个架构是React开发的常见模式,能够...

    react-router实现按需加载

    本文使用的 React-router 版本为 2.8.1 React Router自己就有一套按需加载解决方案,将代码拆分成多个小包,在浏览过程中实现按需加载; 如过你的项目搭配了webpack打包工具,那么需要在webpack.config.js的output内...

    react demo

    在IT行业中,React是一个非常流行的JavaScript库,用于构建用户...当你对基础有所了解后,可以进一步探索Redux(状态管理)、React Router(路由管理)、Ant Design(UI框架)等高级主题,以扩展和增强你的React应用。

    AxiosJS-and-ReactRouter-Demo:显示使用Axios进行GET,POST,DELETE请求的示例

    本项目"AxiosJS-and-ReactRouter-Demo"旨在展示如何在React应用中结合使用Axios库进行HTTP请求(如GET、POST、DELETE)以及React Router进行页面路由管理。以下是对这些技术的详细说明: 1. AxiosJS: Axios是一款...

    react-antd-demo:学习react+react-router +antd 搭环境

    git clone :modanzuo/react-antd-demo.git #框架用到的库 antd react react-app-rewired react-router react-router-dom fetch #运行 安装库 npm install #本地开发 yarn yarn run start npm npm run start ...

    react-router-dom5.0的路由拦截.rar

    react-router-dom5.0的路由拦截 守卫 demo 封装好的 可以直接套用,方便研究使用,直接移植,对着修改,安装 redux等就行,免 c币 下载地址 http://download.lllomh.com/cliect/#/product/J615178556091098

Global site tag (gtag.js) - Google Analytics