github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented react-router-dom v4

Browse Source
This commit is contained in:
Keven van Zuijlen
2017-03-28 14:21:25 +02:00
committed by Steve Sanderson
parent 7a11cf97fd
commit d2c56d19d0
4 changed files with 17 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/ReactSpa/ClientApp/boot.tsx
View File

@@ -2,12 +2,12 @@ import './css/site.css';
import 'bootstrap'; import 'bootstrap';
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import { browserHistory, Router } from 'react-router'; import { BrowserRouter as Router } from 'react-router-dom';
import routes from './routes'; import routes from './routes';
// This code starts up the React app when it runs in a browser. It sets up the routing configuration // This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element. // and injects the app into a DOM element.
ReactDOM.render( ReactDOM.render(
<Router history={ browserHistory } children={ routes } />, <Router children={ routes } />,
document.getElementById('react-app') document.getElementById('react-app')
); );

4
templates/ReactSpa/ClientApp/components/Layout.tsx
View File

@@ -2,7 +2,7 @@ import * as React from 'react';
import { NavMenu } from './NavMenu'; import { NavMenu } from './NavMenu';
export interface LayoutProps { export interface LayoutProps {
body: React.ReactElement<any>; children?: React.ReactNode;
} }
export class Layout extends React.Component<LayoutProps, {}> { export class Layout extends React.Component<LayoutProps, {}> {
@@ -13,7 +13,7 @@ export class Layout extends React.Component<LayoutProps, {}> {
<NavMenu /> <NavMenu />
</div> </div>
<div className='col-sm-9'> <div className='col-sm-9'>
{ this.props.body } { this.props.children }
</div> </div>
</div> </div>
</div>; </div>;

14
templates/ReactSpa/ClientApp/components/NavMenu.tsx
View File

@@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Link } from 'react-router'; import { Link, NavLink } from 'react-router-dom';
export class NavMenu extends React.Component<{}, {}> { export class NavMenu extends React.Component<{}, {}> {
public render() { public render() {
@@ -18,19 +18,19 @@ export class NavMenu extends React.Component<{}, {}> {
<div className='navbar-collapse collapse'> <div className='navbar-collapse collapse'>
<ul className='nav navbar-nav'> <ul className='nav navbar-nav'>
<li> <li>
<Link to={ '/' } activeClassName='active'> <NavLink to={ '/' } exact activeClassName='active'>
<span className='glyphicon glyphicon-home'></span> Home <span className='glyphicon glyphicon-home'></span> Home
</Link> </NavLink>
</li> </li>
<li> <li>
<Link to={ '/counter' } activeClassName='active'> <NavLink to={ '/counter' } activeClassName='active'>
<span className='glyphicon glyphicon-education'></span> Counter <span className='glyphicon glyphicon-education'></span> Counter
</Link> </NavLink>
</li> </li>
<li> <li>
<Link to={ '/fetchdata' } activeClassName='active'> <NavLink to={ '/fetchdata' } activeClassName='active'>
<span className='glyphicon glyphicon-th-list'></span> Fetch data <span className='glyphicon glyphicon-th-list'></span> Fetch data
</Link> </NavLink>
</li> </li>
</ul> </ul>
</div> </div>

12
templates/ReactSpa/ClientApp/routes.tsx
View File

@@ -1,15 +1,15 @@
import * as React from 'react'; import * as React from 'react';
import { Router, Route, HistoryBase } from 'react-router'; import { Route } from 'react-router-dom';
import { Layout } from './components/Layout'; import { Layout } from './components/Layout';
import { Home } from './components/Home'; import { Home } from './components/Home';
import { FetchData } from './components/FetchData'; import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter'; import { Counter } from './components/Counter';
export default <Route component={ Layout }> export default <Layout>
<Route path='/' components={{ body: Home }} /> <Route exact path='/' component={ Home } />
<Route path='/counter' components={{ body: Counter }} /> <Route path='/counter' component={ Counter } />
<Route path='/fetchdata' components={{ body: FetchData }} /> <Route path='/fetchdata' component={ FetchData } />
</Route>; </Layout>;
// Allow Hot Module Reloading // Allow Hot Module Reloading
declare var module: any; declare var module: any;