Deny specific browsers from accessing my app - html

looking for some code that I could add in to my reactjs app that will present users with an error when accessing my app using Firefox.... Something like Browser Type is not supported.
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
import Home from './components/Home';
import Test from './components/Test';
import Test1 from './components/Test1';
class App extends Component {
render() {
return (
<Router>
<div>
<Navbar />
<Switch>
<Route exact path="/" component={Home} /> <Route exact path="/home" component={Home} /> <Route exact path="/test" component={Test} /> <Route exact path="/test1" component={Test1} />
<Route component={NoMatch} />
</Switch>
</div>
</Router>
);
}
}
export default App;
Online I see some bits but I'm unsure where if should be added in to my app.jsx or my index.html or index.jsx......
Looking for someone that might have an example for me please


try this
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
import Home from './components/Home';
import Test from './components/Test';
import Test1 from './components/Test1';
class App extends Component {
render() {
if(navigator.userAgent.indexOf("Firefox") > 0) {
return <div>Browser not supported </div>
}
return (
<Router>
<div>
<Navbar />
<Switch>
<Route exact path="/" component={Home} /> <Route exact path="/home" component={Home} /> <Route exact path="/test" component={Test} /> <Route exact path="/test1" component={Test1} />
<Route component={NoMatch} />
</Switch>
</div>
</Router>
);
}
}
export default App;

Related

Reactjs routes format needed

Asking here as I cannot find a definitive answer online..... Should my reactjs routes look like this
import './App.css'; import { BrowserRouter as Router, Route, Link, Switch, Redirect } from 'react-router-dom';
import Home from './components/Home';
import Test from './components/Test';
import Test1 from './components/Test1';
class App extends Component {
render() { return
(
<Router>
<div>
<Navbar />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/home" component={Home} />
<Route exact path="/test" component={Test} />
<Route exact path="/test1" component={Test1} />
<Route component={NoMatch} /> </Switch>
</div>
</Router>
);
}
}
export default App;
Or should it include index.html like this
<Route exact path="/test/index.html component={Test} />
The reason I ask is when I refresh the page on any path other than root I get a 404 page cannot be found

Is there a way to define default route (if no one match) in react-router-redux#5.0.0

Im using react-router-redux#5.0.0
I have this
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
Is there a way to define default route as in react-router-redux#4.x.x?
It is also necessary this "default route" does not pass if any other matched.
Because if I will add
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
<Route component={ Default } />
Default component will be rendered for all routes, including '/login' and '/'

I was looking for answer for the same problem but for react-router-dom package. The solution was this:
<Switch>
<Route path='/login' component={ Login } />
<Route exact path='/' component={ Home } />
<Route component={ Default } />
</Switch>
This way the first Route that matches will be displayed while the rest ignored.
You can import Switch together with Route like this:
import { BrowserRouter, Switch, Route } from 'react-router-dom';

Place the following catch-all route after all other routes are defined (optionally leave the path out as stated below):
<Route path="*" component={DefaultRoute} />
Here's a link to an answer with more details: React-Router: No Not Found Route?

With latest react-router version,
<Route path='' Componenet={Default}>
should be changed to,
<Route path='' element={<Default>}>

Can we still use routes={routes} for react-router v4?

The following code works:
import { BrowserRouter as Router, Route } from "react-router-dom";
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router>
<Route exact path="/" component={PostsIndex} />
</Router>
</Provider>
),
document.querySelector('#root')
);
But if I put the routes into a file routes.js, and
import routes from "./routes";
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router routes={routes} />
</Provider>
),
document.querySelector('#root')
);
and inside of routes.js:
export default (
<Route exact path="/" component={PostsIndex} />
);
Then it doesn't work. This worked before in react-router#2.0.0-rc5... so can we not use the form routes={routes} any more? How should it be done?

You can put routes inside Router
<Router>
{routes}
</Router>

loop through json reactJS

Id like to loop through a json file displaying the first level values as links as so:
<Route path='/acordes' component={Acordes}>
<IndexRoute component={La} />
<Route path='laSib' component={LaSib} />
<Route path='query' component={Query} />
</Route>
JSON
{
"la": {
"tonoMayor": "A",
"tonoMenor": "Am",
"septima": "A7",
"sexta": "A6",
"menorSexta": "Am6",
"menorSeptima": "Am7",
"septimaMayor": "A7M",
"disminuida": "Adim7",
"aumentados": "Aaug"
},
"la#Sib": {
"tonoMayor": "la#",
"tonoMenor": "A#m",
"septima": "A#m",
"sexta": "A#6",
"menorSexta": "A#m6",
"menorSeptima": "A#m7",
"septimaMayor": "A#7m",
"disminuida": "A#dim7",
"aumentados": "A#aug"
}
}
JS
import React, { Component } from 'react'
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory, DefaultRoute, IndexLink } from 'react-router'
import Data from '!json!../json/acordes.json';
class App extends Component {
render () {
return (
<Router history={hashHistory}>
<Route path='/' component={Container}>
<IndexRoute component={Home} />
<Route path='/acordes' component={Acordes}>
<IndexRoute component={La} />
<Route path='laSib' component={LaSib} />
<Route path='query' component={Query} />
</Route>
<Route path='/about(/:name)' component={About} />
<Route path='/namedComponent' component={NamedComponents}>
<IndexRoute components={{ title: Title, subTitle: SubTitle }} />
</Route>
<Route path='*' component={NotFound} />
</Route>
</Router>
)
}
}
Then when the user clicks on {la} it should show the contents of it from the json.

Possible to mix JSX and regular object for routes in React Router?

With React Router, I see here that I can define my routes as either JSX or just a normal object. I have a use case where I would like to share settingsRoutes with another part of my application as a normal object but still use JSX for the other routes. The second code block is what I was like to do. Is this mixing of JSX and objects possible with react router??
const settingsRoutes = [{
path: 'settings',
component: Settings,
childRoutes: [
{
path: 'info',
component: SettingsInfo
}
]
}]
module.exports = settingsRoutes
var settingsRoutes = require('settingsRoutes')
<Route path='/' component={ Container }>
<Route path='register' component={ Register } />
<Route path='signin' component={ Signin } />
<Route path='signout' component={ Signout } } />
{ settingsRoutes }
</Route>

Do this:
<Route path='/' component={ Container }>
<Route path='register' component={ Register } />
<Route path='signin' component={ Signin } />
<Route path='signout' component={ Signout } } />
<Route childRoutes={settingsRoutes} />
</Route>