React踩坑記

一： Support for the experimental syntax 'classProperties' isn't currently enabled

ERROR in ./src/index.js Module build failed (from ./node_modules/_babel-loader@8.0.5@babel-loader/lib/index.js): SyntaxError: F:\Front-end items\vs code\react-2\src\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:15):

解決方法：cnpm i -D @babel/plugin-proposal-class-properties，並在.babelrc文件裏添加："plugins": ["@babel/plugin-proposal-class-properties"]

二： ES6 class 語法來定義一個組件的時候，this 的綁定 類的方法默認是不會綁定 this 的，所以若是咱們沒有綁定this，當調用這個方法時，this 的值會是 undefined。解決方法有三個：1，在構造函數中使用bind綁定this或在回調函數中使用bind綁定this；2，使用屬性初始化器語法來正確的綁定回調函數；3，在回調函數中使用箭頭函數。例子見官網，這幾種都有介紹。

三：react-router-dom 中 path 在匹配路由組件時，exact表示嚴格匹配，即/about與/是不匹配的。 例如：

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Index}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/users" component={Users}></Route>
      </div>
    </Router>
  )
}