react-router-dom - navigate directly to route

5
votes

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.

2
react-routerreact-router-reduxreact-router-dom
Which version of react-router-dom are you using? - Taylor King
@TaylorKing I am using v4.1.1 - Paul C
And I'm assuming your import statement looks like this: - Taylor King
import { BrowserRouter as Router } from 'react-router-dom'; - Taylor King
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

2 Answers

1
votes

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

0
votes

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.