react.js+express项目配置

1.安装

npm install -g create-react-app

2.创建项目

create-react-app routed-react
cd routed-react

3.打开本地服务

npm start

4.安装classnames

npm install --save classnames

5.修改项目布局

# Create 'components' directory and 'App' sub-directory
mkdir -p src/components/App
# Move App component to new directory
mv src/App.js   src/components/App/index.js
mv src/App.css  src/components/App/style.css
mv src/logo.svg src/components/App/logo.svg

6.增加一个about页面

mkdir src/components/About
touch src/components/About/index.js
touch src/components/About/style.css

7.增加一个404页面

mkdir src/components/NotFound
touch src/components/NotFound/index.js
touch src/components/NotFound/style.css

8.安装react-router

npm install --save react-router

9.安装express

# Install dependencies
npm install --save express morgan
# Create server files
mkdir server
touch server/app.js
touch server/index.js

10.运行

# Build to 'build' directory (it's ignored by git, see .gitignore)
npm run build
# Start the express.js app
node server

*代码部分

src/index.js  修改router路径

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import App from './components/App/index';
import About from './components/About/index';
import NotFound from './components/NotFound/index'


import './index.css';


ReactDOM.render(
  <BrowserRouter>
    <div>
      <Switch>
        <Route exact path='/' component={App} />
        <Route path='/about' component={About} />
        <Route path='/*' component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>,
  document.getElementById('root')
);

其中exact 表示完全相同，不加则是前缀匹配，switch表示只会按顺序匹配到一个，