0
159
Visualizações¿Cómo usar la ruta en React?
Estoy aprendiendo del Django rest framework + tutorial de reacción. Tengo un problema, el "Componente de la aplicación" no aparece después de ingresar la dirección URL.
índice.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'));Aplicación.js
import React, { PureComponent } from 'react'; function App() { return ( <div> <h1>App component</h1> </div> ); } export default App;3 Respostas
Responde à pergunta0
Le falta el componente principal de Routes: envuélvalo así y reemplace el componente con el elemento, ya que no funciona con el enrutador v6:
import {Routes, Route, Link, Switch, BrowserRouter} from "react-router-dom" const routing = ( <BrowserRouter> <Routes> <Route path="/app" element={<App />}></Route> </Routes> </BrowserRouter> );0
No veo ningún problema manifiesto en los fragmentos de código compartidos.
react-router-dom v5
Los fragmentos que compartió son los componentes y la sintaxis v5.
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
Si de alguna manera instaló v6, entonces el componente Switch fue reemplazado por los componentes Routes , y ahora el componente Routes debe envolver cualquier componente Route . Otro cambio es con la Route del componente de enrutamiento, ya no hay accesorios de función de component y render o children , todos reemplazados por un accesorio de element único que toma un ReactElement , o JSX, como un valor.
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
Su routing no es un componente de React. Prueba esto.
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'));Debe pasar el componente React a ReactDOM.render (...), y este es un componente React
const Routing = () => { return (...some jsx...) } # or short version const Routing = () => ( .... some jsx .... )Este no es un componente React
const Routing = ( ...some jsx... )