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>
Related
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
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;
How do I pass middleware to my router when using react router 4?
I'm sure I'm missing something obvious. Thanks!
Pretty standard react redux react-router set-up:
export default (
<Provider store={store}>
<BrowserRouter>
<div>
<Route exact path="/" component={Home} /> {/* index route */}
<Route path="/question/" component={Question} />
</div>
</BrowserRouter>
</Provider>
);
When a user clicks a link it will guide the user to a checkout page.
selectSlot(slot){
window.location = `/checkout/${slot.target.value}`
}
My approach won't keep the redux store values.
How can I keep those values?
Here are the router definitions
<Provider store={store}>
<ConnectedRouter history={history}>
<Router>
<Switch>
<Route exact path="/" component={MainLayout} />
<Route exact path="/index.html" component={MainLayout} />
<Route path="/checkout" component={CheckoutLayout} />
<Route component={NotFound}/>
</Switch>
</Router>
</ConnectedRouter>
</Provider>
I am using Link from react-router-dom for the purpose and works for me. You can read about it here
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