Skip to content

Commit 5dfcd37

Browse files
dustinsoftwareDaniel15
dustinsoftware
authored and
Daniel15
committed
Add react router sample (#479)
* Fix redirecting without explicit status code * Add sample for react router
1 parent 103c2e1 commit 5dfcd37

19 files changed

+3222
-8
lines changed

‎src/React.Router/HtmlHelperExtensions.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ var reactComponent
123123

124124
var executionResult = reactComponent.RenderRouterWithContext(clientOnly, serverOnly);
125125

126-
if (executionResult.Context?.status != null)
126+
if (executionResult.Context?.status != null || executionResult.Context?.url != null)
127127
{
128128
// Use provided contextHandler
129129
if (contextHandler != null)

‎src/React.Router/SetServerResponse.cs

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ public static class SetServerResponse
3636
/// <param name="Response">The response object to use.</param>
3737
public static void ModifyResponse(RoutingContext context, HttpResponse Response)
3838
{
39-
var statusCode = context.status.Value;
39+
var statusCode = context.status ?? 302;
4040

4141
// 300-399
4242
if (statusCode >= 300 && statusCode < 400)

‎src/React.Sample.Router.CoreMvc/.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": ["react", "env"],
3+
"plugins": [
4+
"add-module-exports"
5+
]
6+
}

‎src/React.Sample.Router.CoreMvc/Content/components/expose-components.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
require('expose-loader?React!react');
2+
require('expose-loader?ReactDOM!react-dom');
3+
require('expose-loader?ReactDOMServer!react-dom/server');
4+
5+
require('expose-loader?RootComponent!./home.jsx');

‎src/React.Sample.Router.CoreMvc/Content/components/home.jsx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Component } from 'react';
2+
import {
3+
Link,
4+
BrowserRouter,
5+
Route,
6+
Switch,
7+
StaticRouter,
8+
Redirect
9+
} from 'react-router-dom';
10+
11+
class Navbar extends Component {
12+
render() {
13+
return (
14+
<ul>
15+
<li>
16+
<Link to="/">Home</Link>
17+
</li>
18+
<li>
19+
<Link to="/about">About</Link>
20+
</li>
21+
<li>
22+
<Link to="/contact">Contact</Link>
23+
</li>
24+
</ul>
25+
);
26+
}
27+
}
28+
29+
class HomePage extends Component {
30+
render() {
31+
return <h1>Home</h1>;
32+
}
33+
}
34+
35+
class AboutPage extends Component {
36+
render() {
37+
return <h1>About</h1>;
38+
}
39+
}
40+
41+
class ContactPage extends Component {
42+
render() {
43+
return <h1>Contact</h1>;
44+
}
45+
}
46+
47+
export default class HomeComponent extends Component {
48+
render() {
49+
const app = (
50+
<div>
51+
<Navbar />
52+
<Switch>
53+
<Route exact path="/" render={() => <Redirect to="/home" />} />
54+
<Route path="/home" component={HomePage} />
55+
<Route path="/about" component={AboutPage} />
56+
<Route path="/contact" component={ContactPage} />
57+
<Route
58+
path="*"
59+
component={({ staticContext }) => {
60+
if (staticContext) staticContext.status = 404;
61+
62+
return <h1>Not Found :(</h1>;
63+
}}
64+
/>
65+
</Switch>
66+
</div>
67+
);
68+
69+
if (typeof window === 'undefined') {
70+
return (
71+
<StaticRouter context={this.props.context} location={this.props.path}>
72+
{app}
73+
</StaticRouter>
74+
);
75+
}
76+
return <BrowserRouter>{app}</BrowserRouter>;
77+
}
78+
}

‎src/React.Sample.Router.CoreMvc/Controllers/HomeController.cs

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
using Microsoft.AspNetCore.Mvc;
2+
3+
namespace React.Sample.Router.CoreMvc.Controllers
4+
{
5+
public class HomeController : Controller
6+
{
7+
public IActionResult Index()
8+
{
9+
return View();
10+
}
11+
}
12+
}

‎src/React.Sample.Router.CoreMvc/Program.cs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
using Microsoft.AspNetCore;
2+
using Microsoft.AspNetCore.Hosting;
3+
4+
namespace React.Sample.Router.CoreMvc
5+
{
6+
public class Program
7+
{
8+
public static void Main(string[] args)
9+
{
10+
BuildWebHost(args).Run();
11+
}
12+
13+
public static IWebHost BuildWebHost(string[] args) =>
14+
WebHost.CreateDefaultBuilder(args)
15+
.UseStartup<Startup>()
16+
.Build();
17+
}
18+
}

‎src/React.Sample.Router.CoreMvc/Properties/launchSettings.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"iisSettings": {
3+
"windowsAuthentication": false,
4+
"anonymousAuthentication": true,
5+
"iisExpress": {
6+
"applicationUrl": "http://localhost:9456/",
7+
"sslPort": 0
8+
}
9+
},
10+
"profiles": {
11+
"IIS Express": {
12+
"commandName": "IISExpress",
13+
"launchBrowser": true,
14+
"launchUrl": "",
15+
"environmentVariables": {
16+
"ASPNETCORE_ENVIRONMENT": "Development"
17+
}
18+
},
19+
"React.Sample.Router.CoreMvc": {
20+
"commandName": "Project",
21+
"launchBrowser": true,
22+
"launchUrl": "",
23+
"environmentVariables": {
24+
"ASPNETCORE_ENVIRONMENT": "Development"
25+
},
26+
"applicationUrl": "http://localhost:9457/"
27+
}
28+
}
29+
}

‎src/React.Sample.Router.CoreMvc/React.Sample.Router.CoreMvc.csproj

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
<PropertyGroup>
3+
<TargetFramework>netcoreapp2.0</TargetFramework>
4+
</PropertyGroup>
5+
<ItemGroup>
6+
<Folder Include="wwwroot\" />
7+
</ItemGroup>
8+
<ItemGroup>
9+
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
10+
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" />
11+
</ItemGroup>
12+
<ItemGroup>
13+
<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.0" />
14+
</ItemGroup>
15+
<ItemGroup>
16+
<ProjectReference Include="..\React.AspNet.Middleware\React.AspNet.Middleware.csproj" />
17+
<ProjectReference Include="..\React.AspNet\React.AspNet.csproj" />
18+
<ProjectReference Include="..\React.Core\React.Core.csproj" />
19+
<ProjectReference Include="..\React.Router\React.Router.csproj" />
20+
</ItemGroup>
21+
</Project>

‎src/React.Sample.Router.CoreMvc/Startup.cs

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
using System;
2+
using JavaScriptEngineSwitcher.Core;
3+
using JavaScriptEngineSwitcher.Msie;
4+
using Microsoft.AspNetCore.Builder;
5+
using Microsoft.AspNetCore.Hosting;
6+
using Microsoft.AspNetCore.Http;
7+
using Microsoft.Extensions.Configuration;
8+
using Microsoft.Extensions.DependencyInjection;
9+
using React.AspNet;
10+
11+
namespace React.Sample.Router.CoreMvc
12+
{
13+
public class Startup
14+
{
15+
public Startup(IConfiguration configuration)
16+
{
17+
Configuration = configuration;
18+
}
19+
20+
public IConfiguration Configuration { get; }
21+
22+
// This method gets called by the runtime. Use this method to add services to the container.
23+
public IServiceProvider ConfigureServices(IServiceCollection services)
24+
{
25+
services.AddMvc();
26+
services.AddReact();
27+
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
28+
29+
// Build the intermediate service provider then return it
30+
return services.BuildServiceProvider();
31+
}
32+
33+
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
34+
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
35+
{
36+
if (env.IsDevelopment())
37+
{
38+
app.UseDeveloperExceptionPage();
39+
}
40+
41+
app.UseStaticFiles();
42+
43+
// Initialise ReactJS.NET. Must be before static files.
44+
app.UseReact(config =>
45+
{
46+
config
47+
.SetReuseJavaScriptEngines(true)
48+
.SetLoadBabel(false)
49+
.SetLoadReact(false)
50+
.AddScriptWithoutTransform("~/components-bundle.generated.js");
51+
});
52+
53+
app.UseMvc(routes =>
54+
{
55+
routes.MapRoute("default", "{path?}", new { controller = "Home", action = "Index" });
56+
});
57+
}
58+
}
59+
}

‎src/React.Sample.Router.CoreMvc/Views/Home/Index.cshtml

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@using React.AspNet
2+
@using React.Router
3+
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<title>React Router Sample</title>
8+
<meta charset="utf-8" />
9+
</head>
10+
<body>
11+
@Html.ReactRouterWithContext("RootComponent", new { })
12+
<script src="/components-bundle.generated.js"></script>
13+
@Html.ReactInitJavaScript()
14+
</body>
15+
</html>

‎src/React.Sample.Router.CoreMvc/appsettings.Development.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"Logging": {
3+
"IncludeScopes": false,
4+
"LogLevel": {
5+
"Default": "Debug",
6+
"System": "Information",
7+
"Microsoft": "Information"
8+
}
9+
}
10+
}

‎src/React.Sample.Router.CoreMvc/appsettings.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"Logging": {
3+
"IncludeScopes": false,
4+
"Debug": {
5+
"LogLevel": {
6+
"Default": "Warning"
7+
}
8+
},
9+
"Console": {
10+
"LogLevel": {
11+
"Default": "Warning"
12+
}
13+
}
14+
}
15+
}

‎src/React.Sample.Router.CoreMvc/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "React.Sample.Router.CoreMvc",
3+
"version": "1.0.0",
4+
"main": "index.js",
5+
"license": "MIT",
6+
"scripts": {
7+
"build": "webpack"
8+
},
9+
"dependencies": {
10+
"babel-core": "^6.26.0",
11+
"babel-loader": "^7.1.2",
12+
"babel-plugin-add-module-exports": "^0.2.1",
13+
"babel-preset-env": "^1.6.1",
14+
"babel-preset-react": "^6.24.1",
15+
"expose-loader": "^0.7.3",
16+
"react": "^16.1.1",
17+
"react-dom": "^16.1.1",
18+
"react-router-dom": "^4.2.2",
19+
"webpack": "^3.8.1"
20+
}
21+
}

‎src/React.Sample.Router.CoreMvc/webpack.config.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
entry: './Content/components/expose-components.js',
3+
output: {
4+
filename: './wwwroot/components-bundle.generated.js'
5+
},
6+
module: {
7+
rules: [
8+
{
9+
test: /\.jsx?$/,
10+
exclude: /node_modules/,
11+
loader: 'babel-loader'
12+
}
13+
]
14+
}
15+
};

0 commit comments

Comments
 (0)