'How to create multiple pages on React [duplicate]

So I've check multiple posts and websites and I can't get it to work. It just renders a white screen with a the navbar. This is the code:

App.js:

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'


function App() {
  return (
    <Router>
    <Nav/>
    <Routes>
      <Route path='/about' element={About}/>
    </Routes>
    </Router>
  );
}

export default App;

Index.js:

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

Some component:

<Link to="/about" className="btn btn-colored">Launch</Link>

The 'About' component is working cause I've tested and imported into App.js so that is not the problem.

javascripthtmlreactjswebreact-router


Solution 1:[1]

You need to first import the component you want to render

For example you want to render About component so you would import the About component

  1. Import the component

    import About from "./pages/About";

  2. Fix the syntax as in react-jsx we write it in </> brackets.

    <Route path='/about' element={} />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ChrisG

Related Questions