Nothing renders with tag

Question

I am new to coding with react, but I tried to make a website for the first time. When I tried to make a "new page", with react-router-dom and every time I added the line <Route path='/side2' component={Side2} /> my components disappeared with no warning or error. Here is my code: (App.js)

import Selector from './components/Selector';
import Side2 from './components/Side2';
import {BrowserRouter as Router} from 'react-router-dom';
import {Route} from 'react-router-dom'


function App() {
  return (
    <Router>
      <div className="App">
        <header>Mametphoto</header>
        <Selector />
        <Side2 />
        <Route path="/side2" component={Side2} />
      </div>
    </Router>
  );
}

export default App;

Why does this happen, and how can I fix it? (when I remove the <Route> tag everything works. Here is the rest of my code: (Selector.js)

    return (
        <span>
          <div className="half1">
            <img src={require('../imgs/DSC_3943.jpg')} alt="Family on Bench"/>
            <h2>Side 1</h2>
          </div>
          <div className="half2">
            <a href="/side2">
              <img src={require('../imgs/DSC_4546.jpg')} alt="Family on Bench"></img>
            </a>
            <h2>Side 2</h2>
          </div>
        </span>
    )
}

export default Selector

(Side2.js)

    return (
        <div>
            <a href="/"><button>BACK</button></a>
        </div>
    )
}

export default Side2

Check your package.json file and report back with the version of react-router-dom you are using. They recently changed from v5 to v6 and the syntax is different and that is more than likely your issue. — Steve K, Jan 08 '22 at 22:37
why this is tagged as react-native ?, routing in react and react native is different — shubham jha, Jan 09 '22 at 00:59

score 0 · Answer 1 · answered Jan 08 '22 at 22:42

Try this

App.js

// add switch in app.js

import Selector from './components/Selector';
import Side2 from './components/Side2';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="App">
        <header>Mametphoto</header>
        <Selector />
        <Side2 />
        <Switch>
            <Route exact path="/side2" component={Side2} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Selector.js

// replace a tag with link tag

import { Link } from "react-router-dom";
...
    return (
        <span>
          <div className="half1">
            <img src={require('../imgs/DSC_3943.jpg')} alt="Family on Bench"/>
            <h2>Side 1</h2>
          </div>
          <div className="half2">
            <Link to="/side2">
                <img src={require('../imgs/DSC_4546.jpg')} alt="Family on Bench"></img>
                <h2>Side 2</h2>
            </Link> 
            
          </div>
        </span>
    )
}

export default Selector

Hopefully, this solves your problem. Please let us know if it worked or not.

Adding from react-router-dom gave me this error: `export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'` — greenCode_TM, Jan 09 '22 at 14:08
I see. It could be because of a version issue. My `react-router-dom` is 5.2.0. If you have version 6 then you need to use `Routes` instead of `Switch`. Please follow this [link](https://stackoverflow.com/questions/63124161/attempted-import-error-switch-is-not-exported-from-react-router-dom) for more info. — biraj silwal, Jan 09 '22 at 21:20

score 0 · Answer 2 · answered Jan 09 '22 at 16:23

You're likely using React Router Dom v6, so you should be using the following -

// app.js

import Selector from './components/Selector';
import Side2 from './components/Side2';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <div className="App">
            <header>Mametphoto</header>
            <Selector />
        </div>
        <Route path="/side2" element={<Side2 />} />
      </Routes>
    </Router>
  );
}

export default App;

still nothing works. my screen still has no components – greenCode_TM Jan 09 '22 at 18:47 — greenCode_TM, Jan 09 '22 at 18:47

score 0 · Accepted Answer · answered Jan 09 '22 at 20:20

Looks like you need to wrap the Route component with a Routes component, and fix the prop used to render the Side2 component. react-router-dom v6 doesn't use the component or render and children prop functions anymore, they were removed, replaced by a single element prop that takes a ReactElement, or JSX.

<Routes>
  <Route path="/side2" element={<Side2 />} />
</Routes>

You should also use the Link component instead of raw anchor (<a />) tags for navigation.

return (
  <span>
    <div className="half1">
      <img src={require('../imgs/DSC_3943.jpg')} alt="Family on Bench"/>
      <h2>Side 1</h2>
    </div>
    <div className="half2">
      <Link to="/side2">
        <img src={require('../imgs/DSC_4546.jpg')} alt="Family on Bench"></img>
      </Link>
      <h2>Side 2</h2>
    </div>
  </span>
);

Nothing renders with tag

3 Answers3