I'm trying to figure out how to plug React Router with React VR.
First, should I use react-router dom / native? it's not clear since React VR builds on top of React Native, but runs in the browser.
This is the code I'm having issues with.
import React from 'react';
import { AppRegistry } from 'react-vr';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom'
import Landing from './components/Landing';
import Video from './components/Video';
export default class WelcomeToVR extends React.Component {
render() {
return (
<Router>
<Route exact path={'/vr/'} component={Landing} />
<Route exact path={'/vr/video/'} component={Video} />
</Router>
);
}
};
AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
The above code returns the following errors when opening the browser on /vr/:
I come with this solution based on Ryan Florence video mentioned by remydib using react-router 4.1.2.
In main app component:
import { MemoryRouter, Redirect, Route, Switch } from 'react-router';
...
<MemoryRouter>
...
</MemoryRouter>
In the component using VrButton:
export class NavBtn extends React.Component {
static contextTypes = {
router: React.PropTypes.object.isRequired,
};
render() {
const { to } = this.props;
const onClick = () => this.context.router.history.push(to);
return (
<VrButton onClick={onClick}>
...
</VrButton>
);
}
}
There is react-router-vr package in npm, but it looks like placeholder only. Sadly at the moment there is no support for browser URL.
Ryan Florence, the author of React Router, explains how he does it here: https://twitter.com/ryanflorence/status/808890440929771520
I don't know of a library though.
React-VR does not use the normal history APIs of other applications. Memory Router is the option listed above, but I recommend conditional rendering.
You can use the History API from Native Modules instead to load information into the URL.
Related
i'm trying to use nested routing in react router. But my nesting routig not working. If that's make diffrence i'm using Typescript.
//This is working
<Route exact path={path} component={StudentList}></Route>
//This is not working
<Route path={`${path}/:id`} component={StudentComponent}></Route>
I have a module called StudentModule. In module a have two routes like above when i route to
/students/1 nothing render
I created a sample app on CodeSandbox
https://codesandbox.io/s/vibrant-pasteur-n1eq7
To see what's wrong, navigate to students in menu then click student. It's needs to render StudentComponent and writes Student works on the screen.
Pls help me what's wrong in my code ?
At your main router, you declared
<Route exact path="/students" component={StudentModule} />
Because you set path to be exact from one hand, and not declare path as students*, while navigate to students/1, you aren't entering into the Route which holds the sub-router at all.
In component StudentModule, please declare the variable id, I think you have missed it and string literal is understanding the id as general string.
And pass the url like
<Route exact path={`${path}/${id}`} component={StudentComponent}></Route>
Find the updated code below:
import React from "react";
import { useEffect } from "react";
import { Route, Switch, useRouteMatch } from "react-router-dom";
import StudentComponent from "./Student";
import StudentList from "./StudentList";
export default function StudentModule() {
let { path } = useRouteMatch();
let id = 1;
useEffect(() => {
console.log(path);
});
return (
<Switch>
<Route exact path={path} component={StudentList}></Route>
<Route exact path={`${path}/${id}`} component={StudentComponent}></Route>
</Switch>
);
}
try it, hope this will be helpful.
I run command ionic generate pages/login but me return this error
Since you're using the React project type, this command won't work. The Ionic CLI doesn't know how to generate framework components for React
You'll have to make a new file in e.g src/pages/ (e.g. with the name xy.tsx) with the following contents:
import React from "react";
import {IonPage} from "#ionic/react";
const PageXY: React.FC = () => {
return (
<IonPage>
...
</IonPage>
);
};
export default PageXY;
and in your App.tsx aka Router you have to import it with import PageXY from "./pages/xy";
and hook it up to the Router like so: <Route path="/xy" component={PageXY} exact />
Hope this still helps someone
Ok, guys, here's the problem... I've been writing code for my web application using another fluently working app as an example for the beginning. Here is the source code:
(./app.jsx)
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from './components/app';
import Signin from './components/auth/signin';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory}>
<Route path='/' component={App}>
<Route path='signin' component={Signin} />
</Route>
</Router>
</Provider>,
document.getElementById('app')
);
(./components/app.js)
import React, { Component } from 'react';
import Header from './header';
export default class App extends Component {
render() {
return (
<div>
<Header />
{this.props.children}
</div>
);
}
}
(./components/auth/signing.js)
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
class Signin extends Component {
handleFormSubmit({ email, password }) {
console.log(email, password);
}
render() {
const { handleSubmit, fields: { email, password }} = this.props;
return (
<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Email</label>
<input {...email} className="form-control"/ >
</fieldset>
<fieldset className="form-group">
<label>Email</label>
<input {...password} className="form-control"/ >
</fieldset>
<button action="submit" className="btn btn-primary">Sign in</button>
</form>
);
}
}
export default reduxForm({
form: 'signin',
fields: ['email', 'password']
})(Signin);
(you can see my whole repository here: https://github.com/LiJuons/react-dribbble )
The thing is that when I go to localhost:3000 - everything's Ok, but when I enter localhost:3000/signin - I get error message that says "Cannot GET /signin" THOUGH the application I'm taking code from works properly and shows form!
The problem is in routes, because if I set signin.js route's path to '/' in my project, form is shown on home directory without any problem.
Package.json files are the same in both projects (same number of packages, same versions and dependencies), only start script differs, so...
THE ONLY DIFFERENCE between the working project and mine is that in working one 'npm start' script is defined as:
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
where in mine it's:
"start": "node server.js"
P.S. I checked every line to be sure that code of both projects would be as homogeneous as possible.
Any suggestions how to fix this issue?
Thank you
Your server is probably not configured to support HTML5 history.
Take a look at https://medium.com/#baphemot/understanding-react-deployment-5a717d4378fd
React-router not working when typing URL manually
This is a common surprise and is related to the fact that you are using browserHistory in your application, which requires some additional configuration of the server itself. Basically, when you type the URL by hand, by default the server will look for a file with that path, stored on its disk — if not found, it will show a 404 error. What you want to do is internally redirect the request to the index of your application.
You can see the documentation for react-router v3 about this setting (don’t worry, it’s still valid for react-router 4!). Common configuration are:
express:
const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()
// this assumes that all your app files
// `public` directory relative to where your server.js is
app.use(express.static(__dirname + '/public'))
app.get('*', function (request, response){
response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})
app.listen(port)
console.log("Server started on port " + port);
So I have this json file
info.json
{
"experience":[
{
"title":"Pratt & Whitney Canada",
"date":"September 2015 - December 2015"
}
]
}
then I have my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './main';
import Info from './info';
ReactDOM.render(
<Main info={Info}/>,
document.getElementById('root')
);
and then inside my main.js
import React from 'react';
import Title from './title';
const Main = () => (
<Title Info={this.props.info.experience}/>
);
Main.propTypes = {
}
export default Main;
so when it gets render I get the following error:
Uncaught TypeError: Cannot read property 'props' of undefined
basically what I want to do is a way to get the values inside my json file, pass it through my index.js so that I can then use it in different component.
Edit: title.js
import React from 'react';
import './style.css'
const Title = (props) => (
<div className="pos_left">
<p className="titles">Someone</p>
<p className="subtitles">3rd Year Software Engineer | something</p>
<p>{props.data.experience}</p>
</div>
);
export default Title;
The problem I am having with this is that is not displaying anything
or instead should I do <p> {props.where} </p>
The reason why it throws you this error is because you are trying to use functional components.
While class components know about props (and state using this) automatically, functional components do not.
If you want to use props in a functional component, you need to pass props argument like this:
const Main = (props) => (
<Title Info={props.info.experience} />
);
(More information about class and functional components on React documentation)
Suppose that I have the following root query in a relay with react-router-relay project:
export default {
calc: () => Relay.QL`query queryType ($number: String) { auth (number: $number) }`,
}
Initial value of $number comes from server like a hidden input and I want to use this number in my first query to server. How can I pass $number to my query using the current react-router-relay API? This is neither a queryParam or stateParam.
You should be able to do something like:
import {createHistory} from 'history';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Router} from 'react-router-relay';
import MyComponent from './components/MyComponent';
import MyComponentQueries from './routes/MyComponentQueries';
function addAuthParam(params, route) {
return {
...params,
number: 'SECRET',
};
}
ReactDOM.render(
<Router
history={createHistory()}
createElement={ReactRouterRelay.createElement}>
<Route
component={MyComponent}
path="/thing/:id"
prepareParams={addAuthParam}
queries={MyComponentQueries}
/>
</Router>,
document.getElementById('relay-root')
);
prepareParams was added in react-router-relay in v0.6.2. The above syntax should work for that or v0.7.0 (the current release) as well.