路由问题：我的渲染路由不起作用？

Posted 2023-02-22

【中文标题】路由问题：我的渲染路由不起作用？

【英文标题】：routing problem: my routes on render are not working?

【发布时间】：2022-01-19 07:55:27

【问题描述】：

import Home from "./Pages/home/Home";
import TopBar from "./components/topbar/Topbar.jsx";
import Single from "./Pages/single/Single";
import Write from "./Pages/write/Write";
import Settings from "./Pages/settings/Settings";
import Login from "./Pages/login/Login";
import Register from "./Pages/register/Register";
import  BrowserRouter as Router, Routes, Route, Link  from "react-router-dom";

function App() 
  const user = true;
  return (
    <Router>
      <TopBar />
      <Routes>
        <Route exact path="/" component=Home />
        <Route path="/register" component=user ? <Home /> :Register />
        <Route path="/login" component=user ? <Home /> : Login />
        <Route path="/write" component=user ? <Write /> : Register />
        <Route path="/settings" component=user ? <Settings /> : Register />
        <Route path="/post/:Id" component=Single />
      </Routes>
    </Router>
  );


export default App;

这是我的代码，但是除了 topbar 之外主页没有呈现我如何解决这个问题。不确定语法是否正确。

【参考方案1】：

是的，语法有点混乱。在 react-router-dom 版本 6 中，Route 组件将其组件呈现在 element 道具 as JSX 上，而不是在任何 component 或 render 道具上作为对返回 JSX 的 React 组件或函数的引用。

function App() 
  const user = true;
  return (
    <Router>
      <TopBar />
      <Routes>
        <Route path="/" element=<Home /> />
        <Route path="/register" element=user ? <Home /> : <Register /> />
        <Route path="/login" element=user ? <Home /> : <Login /> />
        <Route path="/write" element=user ? <Write /> : <Register /> />
        <Route path="/settings" element=user ? <Settings /> : <Register /> />
        <Route path="/post/:Id" element=<Single /> />
      </Routes>
    </Router>
  );