As a User i want to access content via going direkt on an deep url
Situation
On the Main Page i have a link to "about" page. clicking on the the Content changes as expected. The Page gets loaded and the url changes to localhost:8080/about.
If I now refresh the Page i get the error:
Cannot GET /about
I wonder if this is the normal behavior or did I miss something out?
Routes:
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Main = require('./components/Main');
var About = require('./components/About');
module.exports = (
<Router history={browserHistory} >
<Route path="/" component={Main}>
<Route path="about" component={About}/>
</Route>
</Router>
)
Main:
var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
module.exports = React.createClass({
render: function() {
return <div>
<div>Header!!</div>
{this.content()}
</div>
},
content: function() {
if(this.props.children) {
return this.props.children
} else {
return (
<div>
<h1>Main</h1>
<Link to={'about'}>To about</Link>
</div>)
}
}
});
About:
var React = require('react');
module.exports = React.createClass({
render: function() {
return (<div>About</div>)
}
});
And my package.json
{
"name": "react-starter",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browserify": "^13.0.0",
"gulp": "^3.9.0 ",
"gulp-concat": "^2.6.0",
"gulp-react": "^3.1.0",
"gulp-sass": "^2.1.1",
"gulp-server-livereload": "1.6.2",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"node-notifier": "^4.4.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^2.0.0-rc5",
"reactify": "^1.1.1",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
"devDependencies": {}
}
To solve the error "export 'Redirect' (imported as 'Redirect') was not found in 'react-router-dom'", use the Navigate component instead of Redirect , e.g. <Navigate to="/dashboard" replace={true} /> . The Navigate component changes the current location when it's rendered. Copied!
React Router has a useHistory hook that provides a history interface that we can easily use for routing. Add buttons to these pages as shown below to add routing with the History API. The snippet above uses the goBack() method to mimic the back button in the browser and the push() method to move to a new route.
“browser history” - A DOM-specific implementation, useful in web browsers that support the HTML5 history API. “hash history” - A DOM-specific implementation for legacy web browsers. “memory history” - An in-memory history implementation, useful in testing and non-DOM environments like React Native.
Use the useLocation() hook to get the current route with React Router, e.g. const location = useLocation() . The hook returns the current location object. For example, you can access the pathname as location. pathname .
When using browserHistory
, you must configure your server appropriately to serve at all routed paths. See this for details.
I had same problem. So as above @taion's answer told that we need to configure express server to make hot reloading with URLs in routes.
But if you don't want to put express server additionally just to make hot reloading work, use this to run your project.
webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors
Earlier, I was using just this which needs express server to be configured
webpack-dev-server --hot --inline
NOTE: But I still think, you need to configure for nginx when you'll deploy. The above commands I told are just for development purposes. So don't forget to look at this as @taion told.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With