Fixed AppRoute component. Solved issue with passing params to components from React Router. Edited readme.

Author: Trixon

README.md

@@ -1,7 +1,17 @@
+![](https://habrastorage.org/webt/uk/yi/uy/ukyiuyzyeahoi3rebyllgcqv8ao.png)
+
+Project template available on [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=NikolayMaev.ReactCoreBoilerplate).
+
+# Changes
+Version | Date | Description
+---|---|---
+1.1 | 2018-10-16 | Fixed `AppRoute` component. Solved issue with passing params to components from React Router.
+
 # Description
 React Core Boilerplate is a starting point for building universal/isomorphic React applications with ASP.NET Core 2.
 It bases on the TypeScript and other libraries for creating powerfull web applications.
 All work fine out of the box. Also helpful for newbies.
+In project exists fake authorization system, you can change it to Identity or another.
 
 # Usage
 

ReactCoreBoilerplate/ClientApp/components/shared/AppRoute.tsx

@@ -1,29 +1,24 @@
 import { Route, RouteProps, Redirect } from "react-router";
 import * as React from "react";
-import AccountService from "@Services/AccountService";
 import Globals from "@Globals";
 
-type Props = {layout: React.ComponentClass<any>;} & RouteProps;
+export interface IProps extends RouteProps {
+    layout: React.ComponentClass<any>;
+}
 
-export default class AppRoute extends React.Component<Props, {}> {
-    constructor(props: Props) {
-        super(props);
-    }
-    render() {
-        var isLoginPath = this.props.path === "/#";
-        if (!Globals.isAuthenticated && !isLoginPath) {
-            return <Redirect to="/#"/>;
-        }
-        if (Globals.isAuthenticated && isLoginPath) {
-            return <Redirect to="/"/>;
-        }
-        var getChildrenFn = 
-            (props) => 
-                React.createElement(
-                    this.props.component as any, 
-                    React.createElement(this.props.component as any, props)
-                );
+export const AppRoute = ({ component: Component, layout: Layout, path: Path, ...rest }: IProps) => {
 
-        return <Route render={(props) => React.createElement(this.props.layout, props, getChildrenFn(props))} />;
+    var isLoginPath = Path === "/#";
+    if (!Globals.isAuthenticated && !isLoginPath) {
+        return <Redirect to="/#" />;
+    }
+    if (Globals.isAuthenticated && isLoginPath) {
+        return <Redirect to="/" />;
     }
+
+    return <Route {...rest} render={props => (
+        <Layout>
+            <Component {...props} />
+        </Layout>
+    )} />;
 }

ReactCoreBoilerplate/ClientApp/routes.tsx

@@ -1,7 +1,7 @@
 import AuthorizedLayout from '@Layouts/authorizedLayout';
 import GuestLayout from "@Layouts/guestLayout";
 import LoginPage from '@Pages/#Page';
-import AppRoute from "@Components/shared/AppRoute";
+import { AppRoute } from "@Components/shared/AppRoute";
 import * as React from 'react';
 import { Switch, Route, BrowserRouter } from 'react-router-dom';
 import HomePage from '@Pages/HomePage';

ReactCoreBoilerplate/README.FIRSTRUN.txt

@@ -0,0 +1,12 @@
+In project exists fake authorization system, you can change it to Identity or another.
+More info: https://github.com/NickMaev/react-core-boilerplate
+
+# Installation
+	1. At the first run you must close the project if it runs in Visual Studio or another IDE. 
+	Open project's folder in console and run command `npm install`.
+	2. Type `npm run build:dev` for development, it will compile the main and vendor bundle.
+	3. Run project.
+
+# Modify WebPack vendor config
+	If you modify the WebPack vendor config, you must manually recompile the vendor bundle.
+	Type `npm run build:dev` to do this.