Fix query parameter handling (reactjs#1077)

Author: dustinsoftware

src/React.Router/ReactRouterComponent.cs

@@ -80,9 +80,11 @@ protected override void WriteComponentInitialiser(TextWriter writer)
 			writer.Write(ComponentName);
 			writer.Write(", Object.assign(");
 			writer.Write(_serializedProps);
-			writer.Write(", { location: '");
-			writer.Write(_path);
-			writer.Write("', context: context }))");
+			writer.Write(", { location: ");
+			writer.Write(JsonConvert.SerializeObject(
+					_path,
+					_configuration.JsonSerializerSettings));
+			writer.Write(", context: context }))");
 		}
 
 		/// <summary>

tests/React.Tests/Router/HtmlHelperExtensionsTest.cs

@@ -261,14 +261,46 @@ public void ShouldHandleQueryParams(bool withOverriddenPath)
 
 			if (withOverriddenPath)
 			{
-				mocks.Engine.Verify(x => x.Evaluate<string>(@"ReactDOMServer.renderToString(React.createElement(ComponentName, Object.assign({}, { location: '/test2?b=1&c=2', context: context })))"));
+				mocks.Engine.Verify(x => x.Evaluate<string>(@"ReactDOMServer.renderToString(React.createElement(ComponentName, Object.assign({}, { location: ""/test2?b=1&c=2"", context: context })))"));
 			}
 			else
 			{
-				mocks.Engine.Verify(x => x.Evaluate<string>(@"ReactDOMServer.renderToString(React.createElement(ComponentName, Object.assign({}, { location: '/test?a=1&b=2', context: context })))"));
+				mocks.Engine.Verify(x => x.Evaluate<string>(@"ReactDOMServer.renderToString(React.createElement(ComponentName, Object.assign({}, { location: ""/test?a=1&b=2"", context: context })))"));
 			}
 		}
 
+		[Theory]
+		[InlineData("?a='\"1", "?a='\\\"1")]
+		public void ShouldEscapeQuery(string query, string expected)
+		{
+			var mocks = ConfigureMockReactEnvironment();
+			ConfigureMockConfiguration();
+			ConfigureReactIdGenerator();
+
+			mocks.Engine.Setup(x => x.Evaluate<string>("JSON.stringify(context);"))
+						.Returns("{ status: 200 }");
+
+			var requestMock = new Mock<HttpRequestBase>();
+			requestMock.SetupGet(x => x.Path).Returns("/test");
+			var queryStringMock = new Mock<NameValueCollection>();
+			queryStringMock.Setup(x => x.ToString()).Returns(query);
+			requestMock.SetupGet(x => x.QueryString).Returns(queryStringMock.Object);
+
+			var htmlHelperMock = new HtmlHelperMocks(requestMock.Object);
+
+			var result = HtmlHelperExtensions.ReactRouter(
+				htmlHelper: htmlHelperMock.htmlHelper.Object,
+				componentName: "ComponentName",
+				props: new { },
+				path: null,
+				contextHandler: (response, context) => response.StatusCode = context.status.Value
+			);
+
+			htmlHelperMock.httpResponse.VerifySet(x => x.StatusCode = 200);
+
+			mocks.Engine.Verify(x => x.Evaluate<string>(@"ReactDOMServer.renderToString(React.createElement(ComponentName, Object.assign({}, { location: ""/test" + expected + @""", context: context })))"));
+		}
+
 		[Fact]
 		public void ShouldRedirectPermanent()
 		{