0
153
ViewsHow 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;
3 answers
Answer question0
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>
);
0
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'));
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'));
0
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...
)