Don't use depricated methods (#751)

Don't use depricated methods

scripts/Custom-Hive.ps1

@@ -14,18 +14,20 @@ function Test-Template($templateName, $templateArgs, $templateNupkg, $isSPA) {
     try {
         Run-DotnetNew $templateArgs, "--no-restore"
 
-        if($templateArgs -match 'F#')
+        if ($templateArgs -match 'F#') {
-        {
             $extension = "fsproj"
         }
-        else
+        else {
-        {
             $extension = "csproj"
         }
 
         $proj = "$tmpDir/$templateName.$extension"
         $projContent = Get-Content -Path $proj -Raw
-        $projContent = $projContent -replace ('<Project Sdk="Microsoft.NET.Sdk.Web">', "<Project Sdk=""Microsoft.NET.Sdk.Web"">`n<Import Project=""$PSScriptRoot/../test/Templates.Test/bin/Debug/netcoreapp2.2/TemplateTests.props"" />")
+        $projContent = $projContent -replace ('<Project Sdk="Microsoft.NET.Sdk.Web">', "<Project Sdk=""Microsoft.NET.Sdk.Web"">
+  <Import Project=""$PSScriptRoot/../test/Templates.Test/bin/Debug/netcoreapp2.2/TemplateTests.props"" />
+  <ItemGroup>
+    <PackageReference Include=""Microsoft.NET.Sdk.Razor"" Version=""`$(MicrosoftNETSdkRazorPackageVersion)"" />
+  </ItemGroup>")
         $projContent | Set-Content $proj
 
         dotnet publish --configuration Release

src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/NavMenu.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
+import { Link } from 'react-router-dom';
 import './NavMenu.css';
 
 export class NavMenu extends Component {
@@ -25,18 +26,18 @@ export class NavMenu extends Component {
       <header>
         <Navbar className="navbar-expand-sm navbar-toggleable-sm ng-white border-bottom box-shadow mb-3" light>
           <Container>
-            <NavbarBrand href="/">Company.WebApplication1</NavbarBrand>
+            <NavbarBrand tag={Link} to="/">Company.WebApplication1</NavbarBrand>
             <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
             <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={!this.state.collapsed} navbar>
               <ul className="navbar-nav flex-grow">
                 <NavItem>
-                  <NavLink className="text-dark" href="/">Home</NavLink>
+                  <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
                 </NavItem>
                 <NavItem>
-                  <NavLink className="text-dark" href="/counter">Counter</NavLink>
+                  <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
                 </NavItem>
                 <NavItem>
-                  <NavLink className="text-dark" href="/fetch-data">Fetch data</NavLink>
+                  <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
                 </NavItem>
               </ul>
             </Collapse>

src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.js

@@ -5,15 +5,18 @@ import { Link } from 'react-router-dom';
 import { actionCreators } from '../store/WeatherForecasts';
 
 class FetchData extends Component {
-  componentWillMount() {
+  componentDidMount() {
-    // This method runs when the component is first added to the page
+    // This method is called when the component is first added to the document
-    const startDateIndex = parseInt(this.props.match.params.startDateIndex, 10) || 0;
+    this.ensureDataFetched();
-    this.props.requestWeatherForecasts(startDateIndex);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentDidUpdate() {
-    // This method runs when incoming props (e.g., route params) change
+    // This method is called when the route parameters change
-    const startDateIndex = parseInt(nextProps.match.params.startDateIndex, 10) || 0;
+    this.ensureDataFetched();
+  }
+
+  ensureDataFetched() {
+    const startDateIndex = parseInt(this.props.match.params.startDateIndex, 10) || 0;
     this.props.requestWeatherForecasts(startDateIndex);
   }
 

src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/NavMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
+import { Link } from 'react-router-dom';
 import './NavMenu.css';
 
 export default class NavMenu extends React.Component {
@@ -21,18 +22,18 @@ export default class NavMenu extends React.Component {
       <header>
         <Navbar className="navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3" light >
           <Container>
-            <NavbarBrand href="/">Company.WebApplication1</NavbarBrand>
+            <NavbarBrand tag={Link} to="/">Company.WebApplication1</NavbarBrand>
             <NavbarToggler onClick={this.toggle} className="mr-2" />
             <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={this.state.isOpen} navbar>
               <ul className="navbar-nav flex-grow">
                 <NavItem>
-                  <NavLink className="text-dark" href="/">Home</NavLink>
+                  <NavLink tag={Link} className="text-dark" to="/">Home</NavLink>
                 </NavItem>
                 <NavItem>
-                  <NavLink className="text-dark" href="/counter">Counter</NavLink>
+                  <NavLink tag={Link} className="text-dark" to="/counter">Counter</NavLink>
                 </NavItem>
                 <NavItem>
-                  <NavLink className="text-dark" href="/fetch-data">Fetch data</NavLink>
+                  <NavLink tag={Link} className="text-dark" to="/fetch-data">Fetch data</NavLink>
                 </NavItem>
               </ul>
             </Collapse>