diff --git a/scripts/Custom-Hive.ps1 b/scripts/Custom-Hive.ps1
index 5c0e0b3f10..aeb7759614 100644
--- a/scripts/Custom-Hive.ps1
+++ b/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
diff --git a/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/NavMenu.js b/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/NavMenu.js
index 07f5b2dbfc..30e2c7ee90 100644
--- a/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/NavMenu.js
+++ b/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>
diff --git a/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.js b/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.js
index 63424996fb..73a98881ed 100644
--- a/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.js
+++ b/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() {
-    // This method runs when the component is first added to the page
-    const startDateIndex = parseInt(this.props.match.params.startDateIndex, 10) || 0;
-    this.props.requestWeatherForecasts(startDateIndex);
+  componentDidMount() {
+    // This method is called when the component is first added to the document
+    this.ensureDataFetched();
   }
 
-  componentWillReceiveProps(nextProps) {
-    // This method runs when incoming props (e.g., route params) change
-    const startDateIndex = parseInt(nextProps.match.params.startDateIndex, 10) || 0;
+  componentDidUpdate() {
+    // This method is called when the route parameters change
+    this.ensureDataFetched();
+  }
+
+  ensureDataFetched() {
+    const startDateIndex = parseInt(this.props.match.params.startDateIndex, 10) || 0;
     this.props.requestWeatherForecasts(startDateIndex);
   }
 
diff --git a/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/NavMenu.js b/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/NavMenu.js
index 72c5282b5c..56966cd5f1 100644
--- a/src/Microsoft.DotNet.Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/NavMenu.js
+++ b/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>