如何在 React 中使用路由？

Question

我正在学习 Django rest 框架 + React 教程。我有一个问题，输入 url 地址后“App Component”没有出现。

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;

Answer 1

您缺少路由父组件：请像这样包装它并用元素替换组件，因为它不适用于路由器 v6：

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

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

Answer 2

您的 routing 不是 React 组件。试试这个。

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 组件传递给 ReactDOM.render(...)，并且这是一个 React 组件

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

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

这不是 React 组件

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

Answer 3

我在共享的代码片段中没有发现任何明显的问题。

`react-router-dom` v5

您分享的片段是 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

如果您以某种方式安装了 v6，则 Switch 组件已被 Routes 组件取代，现在 Routes 组件必须包装任何 Route 组件。另一个变化是 Route 组件 API，不再有 component 道具和 render 或 children 功能道具，全部由单个 element 属性以 ReactElement 或 JSX 作为值。

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'));

如何在 React 中使用路由？

How to use Route in React?

javascript

reactjs

react-router

react-router-dom

`react-router-dom` v5

`react-router-dom`v6

如何在 React 中使用路由？

How to use Route in React?

javascript

reactjs

react-router

react-router-dom

react-router-dom v5

react-router-domv6

`react-router-dom` v5

`react-router-dom`v6