I used HashRouter from react-router-dom.
When I use Router pages are
not found.
what is the best way to remove HashRouter from URL?
My server side project is asp.net MVC and Use webapi2.
IIS6
In App.js file -
import React, { Component } from 'react'
import './App.css'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import Header from './component/header/header'
import Test from './component/test/test'
import Speaking from './component/test/speaking/speaking'
import Demo from './component/test/speaking/demo/demo'
class App extends Component {
render () {
return (
<Router>
<div >
<Header />
<Switch>
<Route path='/' component={Demo} />
<Route path='/test' component={Test} />
<Route path='/Speaking' component={Speaking } />
</Switch>
</div>
</Router>
)
}
}
export default App
Related
I have create this sample repo that use rails (v4.2.6) with react-rails (v1.6.2) and react-router (v2.0.0-rc5): https://github.com/pioz/rails_with_react_and_react_router_example
In the file app/views/application/react_entry_point.html.erb I render the component MountUp with
<%= react_component('MountUp', {}, {prerender: false}) %>
The component MountUp render my router:
class MountUp extends React.Component {
render() {
return(
<Router history={History}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" component={Contact}/>
<Route path="/about" component={About}/>
</Route>
</Router>
)
}
}
All works fine, but if I change the option prerender: true I get a strange error React::ServerRendering::PrerenderError in Application#react_entry_point:
Encountered error "Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings." when prerendering MountUp with {}
Object.invariant [as default] ((execjs):21983:16)
createHashHistory ((execjs):24108:130)
(execjs):22633:20
wrapDeprecatedHistory ((execjs):25285:61)
createRouterObjects ((execjs):25259:23)
componentWillMount ((execjs):25228:38)
ReactCompositeComponentMixin.mountComponent ((execjs):8138:13)
wrapper [as mountComponent] ((execjs):3131:22)
Object.ReactReconciler.mountComponent ((execjs):6583:36)
ReactCompositeComponentMixin.mountComponent ((execjs):8153:35)
/Users/pioz/.rvm/gems/ruby-2.3.0/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
...
How can I render this app server side? Is this the right way to do this?
Found a solution: we need two version of the component MountUp: a client version that use browser history and a server version that use a fake memory history. Here the two version of the component:
// client version
class MountUp extends React.Component {
render() {
return(
<Router history={History}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" component={Contact}/>
<Route path="/about" component={About}/>
</Route>
</Router>
)
}
}
// server version
class MountUp extends React.Component {
render() {
return(
<Router history={createMemoryHistory(this.props.path)}>
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" component={Contact}/>
<Route path="/about" component={About}/>
</Route>
</Router>
)
}
}
We need also to create the memory history with the url path equal to the request: to do this we can pass to the component a new prop path with the path of the request:
<%= react_component('MountUp', {path: request.path}, {prerender: true}) %>
I think telling it not to prerender won't help
prerender: false
Also, do as it suggests and grab the dev version so it tells you a bit more
use the non-minified dev environment for the full error message
You are telling it to build the routes based on the History object, which is supposed to say where the user has requested to be (the url). On the server side, you will need to somehow construct an object that will mimic the browser history with one entry: the requested url.
I have done this in node using Redux using this:
import createHistory from 'history/lib/createMemoryHistory';
var reducer = combineReducers(reducers);
const store = compose(
applyMiddleware(promiseMiddleware, thunk),
reduxReactRouter({routes, createHistory})
)(createStore)(reducer, {});
But you will need to take a different approach in order to get the Rails request details into the history store.
A better error message from the dev library is the next thing you need.
So a weird bug that we have came across in Google chrome on IOS. There is a constant redirect loop occurring. We're using React and React-router.
I came across a weird fix which involved me adding a query string at the end - /#/?_k=p8ttt0 - But this isn't something that we want to do as it's an odd looking string and will ruin the other routes.
Here is the some of the code that we're using.
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react';
import { Router, Route, IndexRoute } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { syncReduxAndRouter } from 'redux-simple-router';
const store = configureStore();
const history = createBrowserHistory();
syncReduxAndRouter(history, store);
render(
<Provider store={store}>
<div>
<Router history={history} onUpdate={() => window.scrollTo(0, 0)}>
<Route path="/" component={SiteContainer}>
<IndexRoute component={HomeLayout} />
<Route path="a" component={HomeLayout} />
<Route path="b" component={HomeLayout} />
<Route path="c" component={HomeLayout} />
<Route path="d" component={HomeLayout} />
</Route>
<Route path="/styleguide" component={StyleguideComponent} />
</Router>
</div>
</Provider>,
document.getElementById('content')
);
Has anyone came across this error before? If so is there a fix for it?
Update 1:
So I found out that replacing createBrowserHistory with createHashHistory fixes this issue but it still uses the ugly hash in the URL. Is there a way around this so I do not have to use this createHashHistory component? I mean what I could do is only use createHashHistory on specific devices (In this case IOS chrome, and any other browser that may have this problem).
I came across a solution in a GitHub issue: https://github.com/rackt/react-router/issues/2565 - Basically this will tell you to update your history module to
"history": "^2.0.0-rc3"
I also updated my React-router module because I had an issue where my react-router version needed to be a specific version to support 2.0.0-rc3
"react-router": "^2.0.0-rc5"
cant get a simple http service to work in angular2. I just get 404 on the service for some reason. It does not contain any functionality yet, but I seems that the DI does not work.
As soon as I add TestService when bootstrapping the application i get the following. GET http://127.0.0.1:8080/testService 404 (Not Found)
index.html
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>AngularJS 2 Tutorial Series</title>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
});
System.import('./app/app.ts');
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
app.ts
import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {Injectable} from 'angular2/core'
import {TestService} from 'testService';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>',
})
class AppComponent {
}
bootstrap(AppComponent, [TestService]);
TestService.ts
import {Http} from 'angular2/http';
import {Injectable} from 'angular2/core';
#Injectable()
export class TestService {
constructor(public http: Http){
}
}
I just ran into this, fixed it by adding the script reference to the http bundle:
<script src="node_modules/angular2/bundles/http.dev.js"></script>
Tried it after remembering that I added a similar resource after implementing routing. Hope this helps someone else!
This is because by Default your 'http.dev.js' is not sourced
Step 1 : index.html
Include 'http.dev.js'
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
Step 2: main.ts
Add import and add 'HTTP_PROVIDERS'
import {bootstrap} from 'angular2/platform/browser';
import { HTTP_PROVIDERS } from 'angular2/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [HTTP_PROVIDERS]);
STEP: 3 app.component.ts
import Http and use it
import {Http} from 'angular2/http';
constructor(http: Http) {
http.get('http://jsonplaceholder.typicode.com/posts/1').subscribe((data) => {
this.response = data._body;
})
}
You will need to add Http by supplying it as a provider. There are 2 ways to accomplish this:
1) at a global level you can specify when you bootstrap the application:
bootstrap(AppComponent, [TestService, Http]);
2) inside the component you are trying to use it within:
#Component({
...
providers: [Http]
})
public class ...
NOTE you will also have to import/require Http when you are supplying it as a provider. This will allow angular's DI to discern what will be injected.
I was wondering if this is the best way to import html dependancies in polymer-dart.
I want to use my-other-element inside my-element this way:
my-element.dart:
#HtmlImport('my-element.html')
library mypackage.my_element;
import 'package:polymer/polymer.dart';
import 'package:web_components/web_components.dart' show HtmlImport;
// HERE I import the dart file
import 'my-other-element.dart'
#PolymerRegister('my-element')
class MyElement extends PolymerElement {
MyElement.created() : super.created();
}
my-element.html:
<!DOCTYPE html>
//HERE I import the element html
<link rel="import" href="my-other-element.html">
<dom-module id="my-element">
<template>
<my-other-element></my-other-element>
</template>
<script type="application/dart" src="my-element.dart"></script>
</dom-module>
Using #HtmlImport(...) and then only import using Darts import ...; directive is the recommended way.
Also:
Using - (dash) in Dart file names is discouraged. Prefer _ (underline)
You also don't need
<script type="application/dart" src="my-element.dart"></script>
in your <dom-module> if you import like suggested above.
I have the following simple .dart and .html files
.dart
//import 'dart:html';
import 'package:polymer/polymer.dart';
/// A Polymer `<main-app>` element.
#CustomTag('main-app')
class MainApp extends PolymerElement {
#observable DateTime today = new DateTime.now();
#observable String aDate = '';
/// Constructor used to create instance of MainApp.
MainApp.created() : super.created();
void onChangeFired() {
print(aDate);
}
}
.html
<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_input.html">
<polymer-element name="main-app">
<template>
<style>
:host {
display: block;
}
</style>
<input type='date' value='{{aDate}}'
on-change='{{onChangeFired}}' id='time' class='margin-lb5px'>
</template>
<script type="application/dart" src="main_app.dart"></script>
</polymer-element>
Running the app in Dartium displays the calendar dropdown. However, each time I select a date, the application crasshes (exits) after printing the selected date with the following
2005-02-08 (:1)
<debug target crashed>
Nothing else is displyed in the console.
I created a new new polymer-app using Stagehand with the same result. Nothing else is there in the application.
This problem is present in the last two Dart Dev updates - I am currently using Dart 1.9.0-dev.9.1 (rev 44018) with the same result.
I am using the Dart eclipse plugin on Windows 8.1
Thanks
This is an issue in the Chrome version Dartium is built on.
Hopefully with Dart 1.15 we get the updated Dartium where this issue should be fixed.