可以通过创建.env环境变量文件影响react-scripts start/build等命令。其实还有另一种更灵活的方式设置环境变量,使用export可以对不同的命令设置不同的环境变量.

打开package.json，找到scripts配置项

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

添加export GENERATE_SOURCEMAP=true/false修改为以下配置

  "scripts": {
    "start": "export GENERATE_SOURCEMAP=true && react-scripts start",
    "build": "export GENERATE_SOURCEMAP=false && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

这样，在运行start调试时，产生sourceMap方便调试；运行build命令时，关闭sourceMap减少产物文件大小。

class Page extends React.Component
{
    render()
    {
        return <div>
                <NavigationBar title="标题"/>
      </div>
    }
}

class NavigationBar extends React.Component
{
    render()
    {
        return <div>
            "返回标题"
        </div>
    }
}

错误提示

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<{}>): NavigationBar', gave the following error.
    Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
  Overload 2 of 2, '(props: {}, context?: any): NavigationBar', gave the following error.
    Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
      Property 'title' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<NavigationBar> & Readonly<{}> & Readonly<{ children?: ReactNode; }>'.  TS2769

原因是Typescript是强类型语言，如果要给组件传值，需要在接受值组的地方声明值类型，就本例而言，需要明确定义props,本例为NavigationBarProps

class Page extends React.Component
{
    render()
    {
        return <div>
                <NavigationBar title="标题"/>
      </div>
    }
}

// 定义props类型
interface NavigationBarProps
{
    title:string;
}
class NavigationBar extends React.Component<NavigationBarProps>
{
    render()
    {
        return <div>
            "返回标题"
        </div>
    }
}

 Line 17:36:  Style prop value must be an object  react/style-prop-object

我写的是:

class CYXQHome extends React.Component {
    render(){
        return (
             <div id="showDiv1" style="display:none;position:relative;left:69px;width:360px" />
             );
      }
}

出现这种错误的原因是style=xxxx那部分，style必须是一个对象 。修改后

<div id="showDiv1" style={ { display:"none",position:"relative",left:"69px",width:"360px" } } />

如上，有两个花括号, {{ {} }} ,外部的{ {} } 表示这是Javascript句法，里面的{ {} } 是一个对象。

参考 http://www.mamicode.com/info-detail-1682242.html

现在需要配置以关闭这种文件的产生。

打开项目的package.json文件，找到下面类似的配置

"scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

可以看到build命令执行的脚本是react-scripts build,然后打开
node_modules/react-scripts/config/webpack.config.js文件。

一般情况下，定位到这，基本就知道了怎么关闭source-map文件产生--搜索shouldUseSourceMap，将其置为false就行了。

如果仔细查看shouldUseSourceMap定义

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

会发现shouldUseSourceMap和process.env.GENERATE_SOURCEMAP环境变量有关,那么在不修改webpack.config.js文件的情况，其实还可以修改环境变量。( 环境变量修改参考https://139.155.43.7/2019/10/15/create-react-app-%e8%87%aa%e5%ae%9a%e4%b9%89%e7%8e%af%e5%a2%83%e5%8f%98%e9%87%8f/ )

在项目目录下创建.env文件,添加内容

GENERATE_SOURCEMAP=false

然后重新执行npm run build，这时应不会产生source-map文件

1、创建.env文件
在react项目目录下创建.env文件。

2、写入环境变量，例如

ABCD=1

3、访问环境变量
对于默认定义好的环境变量，使用process.env.默认环境变量名访问
对于自定义环境变量，需要添加REACT_前缀,即使用process.env.REACT_自定义环境变量名访问

例如

render() {

if (process.env.REACT_ABCD !== 0 ) {
    '示例'
}
  return (
    <div>
      <span> 默认环境变量示例 {process.env.NODE_ENV </span>
      <span> 自定义环境变量示例 {process.env.REACT_ABCD </span>
    </div>
  );
}

参考 ：https://create-react-app.dev/docs/adding-custom-environment-variables

1、创建react app

#创建
npx create-react-app sample
#进入目录
cd sample

2、修改public/index.html

<html>
  <head>
    <title>React 路由</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

3、修改 src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

4、修改src/App.js

import React from 'react';
import { BrowserRouter as Router,Route,Link} from 'react-router-dom';

function Home () {
  return (
    <div>
      <span>主页</span>
      <Link to="/page">其他页面</Link>
    </div>
  );
}

function Page () {
  return (
    <div>
      <span>其他页面</span>
      <Link to="/">主页</Link>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div>
        <Route path="/" exact={true} component={Home} />
        <Route path="/page" exact={true} component={Page} />
      </div>
    </Router>
  );
}

export default App;

5、安装依赖 react-router-dom

yarn add react-router-dom

6、执行看效果

yarn start