react-router-dom - navigate directly to route

Question

When using react-router-dom, should I be able to 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 will be on localhost, and when I manually type '/prequote' to the end of the url in the navbar it doesn't redirect to the component I have specified, instead it throws a 404.

Is that expected behavior?

I have been searching for an answer and seen some suggestions that configuring webpack (I am using webpack) to have devServer.historyApiFallback = true should work but it hasn't worked for me.

If you are just using their Router component, then you need to include the history that is now outside of the react router library. Unless you use the BrowserRouter component ... that now uses the HTML5 history API inside of it. — Taylor King, Apr 24 '17 at 14:44
This is clearly a problem on your dev server. Can't help much without looking at your dev server configurations. The basic idea is to make it work your server should always respond with index.html for any url. — Tharaka Wijebandara, Apr 24 '17 at 15:33
I tried to post an answer but this is SO and the mods take their job way too seriously. Make sure you include devServer: { historyApiFallback: true, } in your webpack config settings. — Tyler McGinnis, Apr 25 '17 at 18:41

score 1 · Answer 1 · answered May 11 '17 at 15:48

Maybe you have the same confusion about historyApiFallback as I once did. I will quote from https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option:

However, if you have modified output.publicPath in your Webpack configuration, you need to specify the URL to redirect to. This is done using the historyApiFallback.index option.
historyApiFallback: {
  index: '/foo-app/'
}

In my case I finally got it by changing the historyApiFallback option to:

historyApiFallback: {
    index:'dist/'
},

regard it as index:'dist/index.html', to be served instead of the devServer throwing 404.

Cheers

score 0 · Answer 2 · answered May 05 '17 at 02:51

Yes, You can navigate to any defined path by manually entering its path in the Url. For example: In the following code, I have created two components Dashboard and information and I have used react-router-dom to provide routing functionality in my app. Using following code you can navigate to the particular component. If you will enter http://server:port/dashboard it will navigate you to dashboard component and If you will enter http://server:port/information it will navigate you to 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;

I hope it will help you.

react-router-dom - navigate directly to route

2 Answers2