Routing returns white page in React.js-CodePudding

I'm trying to set up routing but for some reason, it returns a blank page and renders nothing.

I'm using router version 6.3.0

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter><App /></BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

// --------------------------------------------- //

// App.js

import React, { Component, Fragment } from "react";
import { Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Header />
            <Route path="/landing">
                <Landing />
            </Route>
        <Footer />
      </Fragment>
    );
  }
}

export default App;


// --------------------------------------------- //

// Landing.js

import Body from './Body'

function Landing(props) {
    return (
        <Body>
            <div className="Landing">
              Landing Context
            </div>
        </Body>
    )
}

export default Landing;

So when I visit http://localhost:3000/landing nothing is rendered, and when I try http://localhost:3000 nothing is rendered either.

If I remove the <Route></Route> part in App.js, it renders, but on any URL. What do I miss?

CodePudding user response：

As the OP is using react-router-dom v6

Instead of children, it is expecting element props to render the component.

https://reactrouter.com/docs/en/v6/getting-started/overview#configuring-routes

CodePudding user response：

react-router v6 has some breaking changes, it replaced Switch with Routes component:

/ index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter><App /></BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

// --------------------------------------------- //

// App.js

import React, { Component, Fragment } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";


class App extends Component {
  render() {
    return (
      <Fragment>
            <Header />
                <Routes>  
                    <Route path="/landing" element={<Landing />}/>
                </Routes>
            <Footer />
      </Fragment>
    );
  }
}

export default App;

https://reactrouter.com/docs/en/v6/getting-started/overview

CodePudding user response：

In app.js wrap your route in router like this

import React, { Component, Fragment } from "react";
import { Router, Route } from "react-router-dom";
import Header from "./components/Landing/Header"
import Landing from "./components/Landing/Landing";
import Footer from "./components/Landing/Footer";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Header />
            <Router>
              <Route path="/landing">
                <Landing />
              </Route>
            </Router>
        <Footer />
      </Fragment>
    );
  }
}

export default App;

CodePudding user response：

If your are using react-router version < 6 then you have to add Switch element imported from react-router-dom above your Route Element -

// App.js


import React, { Component, Fragment } from "react";
import { Route, Switch } from "react-router-dom";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Switch>
            <Route path="/landing">
                <div>On LAnding Page</div>
            </Route>
          </Switch>
      </Fragment>
    );
  }
}

export default App;

And if you are using react-router > 6 then you have to replace Switch with Routes and place your component you want to render inside element property of Route . The code should be similar to following -

// App.js


import React, { Component, Fragment } from "react";
import { Route, Routes } from "react-router-dom";


class App extends Component {
  render() {
    return (
      <Fragment>
        <Routes>
            <Route path="/landing" 
              element={<div>On Landing Page</div>}>
            </Route>
          </Routes>
      </Fragment>
    );
  }
}

export default App;

CodePudding user response：

Try this code

class App extends Component {
  render() {
    return (
  <Fragment>
    <Header />
      <Routes>
        <Route path="/landing" element={<Landing />}> 
        </Route>
      </Routes>
    <Footer />
  </Fragment>
    );
  }
}