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
Related
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;
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>}>
I have following route,
<Route exact path ='/' component={Posts} />
<Route exact path ='/:category' component={Posts} />
<Route exact path ='/new' component={NewPost} />
issue is when I go to /new route, Post component is getting rendered as well along with NewPost component. How to avoid that?.
I had to wrap route inside Component. It worked.
import { Route, Switch } from 'react-router-dom'
<Switch>
<Route exact path ='/' component={Posts} />
<Route exact path ='/:category' component={Posts} />
<Route exact path ='/new' component={NewPost} />
</Switch>
This is what my react-router code looks like
render((
<Router history={browserHistory}>
<Route path={CORP} component={App}>
<IndexRoute component={Home} />
<Route path={"outreach"} component={OutReach}/>
<Route path={"careers/m"} component={Career}/>
<Route path={"members"} component={Members}/>
<Redirect from="*" to={"/home"} />
</Route>
</Router>
), document.getElementById('app'))
But when I go to my page, I get this error in my console
Uncaught ReferenceError: Redirect is not defined
How do I tell react-router to redirect the user to the /home only when the user's destination does not match any of the route paths mentioned above?
You just need to add
import { Redirect } from 'react-router';
In the top of your file
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>