React JS 错误 - 没有路线匹配位置“/”答案

【问题标题】：React JS Error - No routes matched location "/"React JS 错误 - 没有路线匹配位置“/”
【发布时间】：2022-01-02 14:01:49
【问题描述】：

它显示白屏和控制台错误（没有路线匹配位置“/”）

import {BrowserRouter as Router, Switch, Routes, Link} from 'react-router-dom'; 
import Home from './pages/Home';
import About from './pages/About';

function App(){
    return <>
            

            <Router>
            <Link to="/">Home</Link> 
            <Link to="/About">About</Link>

                <Routes path={'/'} elements={<Home />}  />
                <Routes path={'/About'} elements={<About />} />
            </Router>       
    </>;
}

export default App;

请帮助我。提前致谢。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

有几点需要改正，

Route 应该包裹在 Routes 中。
Route 的属性名称应该是 element 而不是 elements。

像下面这样试试

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

import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Link to="/About">About</Link>
      <Routes>
        <Route path={"/"} exact element={<Home />} />
        <Route path={"/About"} exact element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Code Sandbox

【讨论】：

【解决方案2】：

试试这个：

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <>
      <Router>
        <Link to="/">Home</Link>
        <Link to="/About">About</Link>

        <Routes>
          <Route index element={<Home />} />
          <Route path="About" element={<About />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

【讨论】：

【解决方案3】：

你需要在你的路由中指定一个组件。

<Route path="/" component={Home} exact />

另外你需要导入路由而不是路由

【讨论】：