Response-router-dom - go directly to the route
When using react-router-dom, should I create a route and navigate to it by manually entering its path in the URL?
const App = () =>
<Provider store={store}>
<Router>
<div>
<Route exact path="/" component={QuotesLandingPage} />
<Route path="/prequote" component={LoadingSpinner} />
</div>
</Router>
</Provider>;
So, I'll be on localhost, and when I manually type ' /prequote
' at the end url
in navbar
, it doesn't redirect to the component I specified, it throws a 404 instead.
Is this the expected behavior?
I searched for an answer and saw some guidelines for setting up webpack (I am using webpack) to get it devServer.historyApiFallback = true
working, but it didn't work for me.
source to share
Perhaps you have the same confusion about historyApiFallback as I did it once. I'll quote from https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option :
However, if you changed the output.publicPath in your Webpack config, you need to specify the URL to redirect. This is done using the historyApiFallback.index option.
historyApiFallback: { index: '/foo-app/' }
In my case, I finally got it by changing the historyApiFallback parameter to:
historyApiFallback: {
index:'dist/'
},
consider it as index: 'dist / index.html' to be used instead of devServer 404 metadata.
Greetings
source to share
Yes, you can navigate to any specific path by manually entering its path in the URL. For example: In the following code, I created two Dashboard components and information and I used react-router-dom to provide routing functionality in my application. Using the following code, you can navigate to a specific component. If you enter http: // server: port / dashboard it will take you to the dashboard component and if you enter http: // server: port / information it will jump to the information component
App.js file
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import React from 'react';
import Dashboard from './Dashboard.js';
import Information from './Information.js';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
this.state = {message: "StackOverflow"};
}
render(){
return (
<Router>
<div>
<Route exact path="/dashboard" render={props => <Dashboard {...props} />} />
<Route exact path="/information" render={props => <Information {...props} />} />
</div>
</Router>
);
}
}
Dashboard.js
import React from 'react';
class Dashboard extends React.Component {
render() {
return (
<div ><h1> Hello React</h1></div>
);
}
}
export default Dashboard;
Information.js
import React from 'react';
class Information extends React.Component {
render() {
return (
<div ><h1> Hello React-Router-DOM</h1></div>
);
}
}
export default Information;
Hope this helps you.
source to share