CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
kowalskijakub
kowalskijakub

Reputation: 45

How to use Route in React?

I'm learning from the Django rest framework + react tutorial. I have a problem, "App Component" is not showing up after entering the url address.

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Link, Switch, BrowserRouter as Router} from "react-router-dom"
import './index.css';
import App from './App';

const routing = (
  <Router>
    <Route path="/app" component={App} />
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

App.js

import React, { PureComponent } from 'react';

function App() {
  return ( 
    <div>
      <h1>App component</h1>
    </div>
   );
}

export default App;

Upvotes: 1

Views: 209

Answers (3)

Drew Reese
Drew Reese

Reputation: 202605

I don't see any overt issue in the shared code snippets.

react-router-dom v5

The snippets you shared are the v5 components and syntax.

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, Switch, BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';

const routing = (
  <Router>
    <Route path="/app" component={App} />
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Edit how-to-use-route-in-react (react-router-dom v5)

react-router-dom v6

If you've somehow installed v6, then the Switch component was replaced by the Routes components, and now the Routes component must wrap any Route components. Another change is with the Route component API, there is no longer the component prop and render or children function props, all replaced by a single element prop that takes a ReactElement, or JSX, as a value.

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, Routes, BrowserRouter as Router } from "react-router-dom";
import './index.css';
import App from './App';

const routing = (
  <Router>
    <Routes>
      <Route path="/app" element={<App />} />
    </Routes>
  </Router>
);

ReactDOM.render(routing, document.getElementById('root'));

Edit how-to-use-route-in-react (react-router-dom v6)

Upvotes: 1

MWO
MWO

Reputation: 2806

You are missing your Routes parent component: Please wrap it like this and replace component with element as its not working with router v6:

import {Routes, Route, Link, Switch, BrowserRouter} from "react-router-dom"

const routing = (
  <BrowserRouter>
    <Routes>
      <Route path="/app" element={<App />}></Route>
    </Routes>
  </BrowserRouter>
);

Upvotes: 1

Doppio
Doppio

Reputation: 2188

Your routing is not a React component. Try this.

import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Link, Switch, BrowserRouter as Router} from "react-router-dom"
import './index.css';
import App from './App';

const Routing = () => (
  <Router>
    <Route path="/app" component={App} />
  </Router>
);

ReactDOM.render(<Routing />, document.getElementById('root'));

You need to pass React Component to ReactDOM.render(...), and this is a React Component

const Routing = () => {
  return (...some jsx...)
}

# or short version
const Routing = () => (
  .... some jsx ....
)

This is not a React Component

const Routing = (
  ...some jsx...
)

Upvotes: -1

Related Questions