`没有路由匹配位置“/” `控制台上显示警告

Question

我正在尝试实施一个小项目并得到了一个 error/warning 像上面的标题。

这是我的 Index.jsx:

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter} from "react-router-dom";

import { App } from "./components/app";

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Suspense fallback={<div>Loading...</div>}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Suspense>
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

App.jsx:

import React, { useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Container } from "@material-ui/core";
import { ToastContainer } from "react-toastify";
import { Route, Routes } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";

import Sidebar from "../sidebar/Sidebar";
import TopNav from "../topnav/TopNav";
import { AppRoutes } from "../AppRoutes";

import ThemeAction from "../../store/actions/ThemeAction";

import "./App.scss";

const useStyles = makeStyles({
  contentStyle: {
    margin: "30px auto",
  },
});

export const App = () => {
  const themeReducer = useSelector((state) => state.ThemeReducer);
  const classes = useStyles();
  const dispatch = useDispatch();

  useEffect(() => {
    const themeClass = localStorage.getItem("themeMode", "theme-mode-light");

    const colorClass = localStorage.getItem("colorMode", "theme-mode-light");

    dispatch(ThemeAction.setMode(themeClass));

    dispatch(ThemeAction.setColor(colorClass));
  }, [dispatch]);

  return (
    <Routes>
      <Route
        render={(routeProps) => (
          <div className={`app ${themeReducer.mode} ${themeReducer.color}`}>
            <Sidebar routeProps={routeProps} />
            <div className="app__content">
              <TopNav />
              <div className="app__content-main">
                <ToastContainer />
                <Container className={classes.contentStyle} maxWidth="sm">
                  <AppRoutes />
                </Container>
              </div>
            </div>
          </div>
        )}
      />
    </Routes>
  );
};

和AppRoutes.jsx：

import React from "react";

import { Route, Routes } from "react-router-dom";

import Customers from "../pages/Customers";
import { Dashboard } from "../pages/Dashboard";
import { UserLogin } from "./User/Login";
import { UserSignup } from "./User/Signup/UserSignup";

export const AppRoutes = () => {
  return (
    <Routes>
      <Route index path="/" element={<Dashboard />} />
      <Route path="customers" component={<Customers />} />
      <Route path="userLogin" element={<UserLogin />} />
      <Route path="userSignup" element={<UserSignup />} />
    </Routes>
  );
};

并且该项目不是运行) 我的意思是浏览器上的白色空白 window 除了 index.tsx:25 No routes matched location "/" .

没有错误

Answer 1

在react-router-dom@6中不再有任何render（或component或children功能道具）。删除 App 中的 Routes 和 Route 组件。您还将更新 Sidebar 以通过挂钩访问 location 对象。

应用程序

return (
  <div className={`app ${themeReducer.mode} ${themeReducer.color}`}>
    <Sidebar routeProps={routeProps} />
    <div className="app__content">
      <TopNav />
      <div className="app__content-main">
        <ToastContainer />
        <Container className={classes.contentStyle} maxWidth="sm">
          <AppRoutes />
        </Container>
      </div>
    </div>
  </div>
);

边栏

const Sidebar = () => {
  const location = useLocation();
  const activeItem = sidebar_items.findIndex(
    (item) => item.route === location.pathname
  );

  return (
    <div className="sidebar">
      <div className="sidebar__logo">
        <img src={logo} alt="company logo" />
      </div>
      {sidebar_items.map((item, index) => (
        <Link to={item.route} key={index}>
          <SidebarItem
            title={item.display_name}
            icon={item.icon}
            active={index === activeItem}
          />
        </Link>
      ))}
    </div>
  );
};

AppRoutes

从 "/" 路由中删除 index 道具。当您指定索引路由时， path 属性将被忽略。另外，确保所有路由都正确使用 element 属性。

<Routes>
  <Route path="/" element={<Dashboard />} />
  <Route path="customers" element={<Customers />} />
  <Route path="userLogin" element={<UserLogin />} />
  <Route path="userSignup" element={<UserSignup />} />
</Routes>

`没有路由匹配位置“/” `控制台上显示警告

`No routes matched location "/" ` warning shown on the console

reactjs

redux

react-router-dom

react-hooks