React Router not rendering component at path, returns blank page with correct pathing

Question

React-Router appears to be working in my app except for the fact that I am getting a blank page instead of my component, even though it is directed to the proper path.

I'm scanning the documentation but I can't resolve the issue on my own after looking it over and searching Google/this site.

I had tried...

• Making it so that the router.js file just contained the routes only to get the same results. Specifying exact path as well when doing so.
• Reinstalling react-router-dom into the component in case there was an error when it downloaded.
• Removing the provider in case that was the issue
• Placing the code in the router file directly in the App.js file between the provider component tags

These are the files involved.

Router.js

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Redirect from='/' to='/landing' />
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
        </Switch>
     );
}

export default Router;

App.js

import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./services/Router";
import ChosenCityContextProvider from "./services/context/ChosenCityContext";

const App = () => {
  return (
    <BrowserRouter>
      <ChosenCityContextProvider>
        <Router />
      </ChosenCityContextProvider>
    </BrowserRouter>
  );
};

export default App;

No error messages accompany the rendering of the site. Aside from the blank page, everything else appears to be working. In the React Dev tools, it states that the Router.Consumer has an object which is revealed to empty when expanded.

What is wrong with my code?

https://codesandbox.io/s/youthful-maxwell-rch1k?fontsize=14

Above is sandbox of code. I have the same issue here

Answer 1

I'm not certain why exactly this fixes the issue, but I've run into this on a work project so knew it worked.

If you add exact into the redirect element it forces the correct behavior.

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Redirect exact from='/' to='/landing' />
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
        </Switch>
     );
}

export default Router;

Answer 2

I tried this and it worked. I'm not sure why before it didn't. If anyone has an explanation please let me know because I am trying to learn what I did wrong initially.

            <Route render={() => <Redirect from='/' to='/landing' />} />

I added the above, so my router file looked like this.

import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';

const Router = () => {
    return ( 
        <Switch>
            <Route path='/landing' component={LandingPage} />
            <Route path='/citypage' component={CityPage} />
            <Route render={() => <Redirect from='/' to='/landing' />} />
        </Switch>
     );
}

export default Router;

@DLowther has also showed me another solution

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Page from "./Page";
import Home from "./Home";

const Router = () => {
  return (
    <Switch>
      <Redirect exact from="/" to="/home" />
      <Route path="/home" component={Home} />
      <Route path="/page" component={Page} />
    </Switch>
  );
};

export default Router;

I would like to credit this individual for answering my question