如何在 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

我在共享代码 sn-ps 中没有看到任何明显的问题。

react-router-domv5

您分享的 sn-ps 是 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-domv6

如果您以某种方式安装了 v6，则 Switch 组件被 Routes 组件替换，现在 Routes 组件必须包装任何Route 组件。另一个变化是 Route 组件 API，不再有 component 道具和 render 或 children 函数道具，全部替换为带有 ReactElement 或 JSX 的单个 element 道具，作为一个值。

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

Answer 2

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

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

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

Answer 3

您的 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...
)