Home > Developer > Web Develop
Webpack4. X React-router
Environmental preparedness: Windows7, Webstorm 2017.1.4, Nodejs 8.7.0, NPM 5.4.2
PS: When installing, we all bring the version, so even if the webpack version changes, there will be no version issue.
Initializing the Package.json file
NPM Init
NPM installs react, react-dom packages
Or
NPM i-s [email protected] [email protected]
NPM installs Webpack, WEBPACK-CLI and other packages
NPM install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [E Mail protected] [email protected] [email protected]--save-dev
Or
NPM i-d [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [Emai L protected] [email protected] [email protected]
Installing React-router-dom
NPM Install React-router-dom--save-dev
Or
NPM i-s React-router-dom
Folder structure
The contents of each file
src = views = home = Index.jsx
Import React from ' React '; class Index extends React.component { render () { return ( /c4><div> Home </div> ); default Index;src = views = Me = Index.jsx
Import React from ' React '; class Index extends React.component { render () { return ( <div> Personal Center </div> ); default Index;src = views = Shop = Index.jsx
Import React from ' React '; class Index extends React.component { render () { return ( /c4><div> Mall </div> ); default Index;src = views = Index.jsx
Import React from ' React 'Import {hashrouter, Route, NavLink} from' React-router-dom 'Import Me from'./me/index 'Import Shop from'./shop/index 'Import Home from'./home/index '; Const Index= () = <HashRouter> <div> <div classname= "nav" > <navlink to= " /Home "Activeclassname=" selected "Exact> homepage </NavLink> <navlink to= "/shop" Activeclassname= "selected" Exact> Mall </NavLink> <navlink to= "/me" Activeclassname= "selected" exact> Personal center </NavLink> </div> <route Path= "/shop" component={shop}/> <route path= "/me" component={me}/> <route path= "Home" Component={home}/> </div> </HashRouter>ExportdefaultIndex;
src = index.js
Import React from ' React 'react-dom'./views/index '; Reactdom.render (<index/>, document.getElementById (' app '));static = Index.html
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"> <Metacontent= "Telephone=no"name= "Format-detection"> <title>React-router</title></Head><Body><DivID= "App"></Div><Scripttype=text/javascriptsrc=js/index.js></Script></Body></HTML>
Webpack = Base.config.js
Let config = { entry: { ' index ': './src/index.js ' }, resolve: { extensions: [". JS ",". Json ",". Jsx ",". css "], = config;Webpack = Dev.config.js
Const WEBPACK = require (' Webpack ');//introduction of WebpackConst OPN = require (' OPN ');//Open BrowserConst MERGE = require (' Webpack-merge ');//webpack configuration file MergingConst PATH = require ("path"); Const Basewebpackconfig= Require ("./base.config");//Basic ConfigurationConst WEBPACKFILE = require ("./file.config");//Some path configurationsLet config=Merge (Basewebpackconfig, {/*setting up the development environment*/mode:' Development ', Output: {path:path.resolve (webpackfile.devdirectory), filename:' Js/[name].js ', Chunkfilename:"Js/[name].js", Publicpath:‘‘}, plugins: [/*set up hot updates*/ NewWebpack. Hotmodulereplacementplugin (),], module: {rules: [{test:/\. (JS|JSX) $/, use: [' Babel-loader ',], include: [Path.resolve (__dirname,".. /src ")], exclude: [Path.resolve (__dirname,".. /node_modules ") ], } ] }, /*Set API Forwarding*/Devserver: {host:' 0.0.0.0 ', Port:8080, hot:true, inline:true, ContentBase:path.resolve (webpackfile.devdirectory), Historyapifallback:true, Disablehostcheck:true, Proxy: [{context: ['/api/** ', '/u/** '], Target:' Http://127.0.0.1:8080/', Secure:false } ], /*Open the browser and open the project URL*/After () {OPN (' http://localhost: ' + This. Port); }}); Module.exports= config;
Webpack = File.config.js
Module.exports = { devdirectory:' static ',/* Development Directory * /prodirectory: ' dist ',/* Publish directory * /resource:' resource ',/* static Resources */};Run effect
Project Address: https://github.com/yangbiaoit/react-webpack/tree/master/02
Webpack4. X + react-router Routing jump
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
