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

【问题标题】：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 之外主页没有呈现我如何解决这个问题。不确定语法是否正确。

【问题讨论】：

标签： node.js reactjs routes navigation react-router-dom

【解决方案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>
  );
}

【讨论】：