React 中的组件未渲染

Question

我目前正在为我的仪表板处理我的导航栏，当我的导航栏组件都已定义但未在屏幕上呈现时遇到了问题。我还在 index.js 中使用了嵌套路由，但这对我也不起作用。谁能指导我并解决这个错误，这让我沮丧了好几天。

这是我的 index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom';
import App from './App.jsx';
import Login from './screens/Login.jsx';
import Register from './screens/Register.jsx';
import Activate from './screens/Activate.jsx';
import Private from './screens/Private.jsx';
import Admin from './screens/Admin.jsx';
import Usage from './screens/Usage.jsx';
import Invoices from './screens/Invoices.jsx';
import Documentation from './screens/Documentation.jsx';
import Plan from './screens/Plan.jsx';
import ForgetPassword from './screens/ForgetPassword.jsx';
import ResetPassword from './screens/ResetPassword.jsx';
import PrivateRoute from './Routes/PrivateRoute';
import AdminRoute from './Routes/AdminRoute';
import 'react-toastify/dist/ReactToastify.css';
ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path='/' exact render={props => <App {...props} />} >
      <Route path = '/plan' exact element = {<Plan/>}/>
      <Route path = '/usage' exact element = {<Usage/>}/>
      <Route path = '/documentation' exact element = {<Documentation/>}/>
      <Route path = '/invoices' exact element = {<Invoices/>}/>
      </Route>
      <Route path='/login' exact render={props => <Login {...props} />} />
      <Route path='/register' exact render={props => <Register {...props} />} />
      <Route path='/users/password/forget' exact render={props => <ForgetPassword {...props} />} />
      <Route path='/users/password/reset/:token' exact render={props => <ResetPassword {...props} />} />
      <Route path='/users/activate/:token' exact render={props => <Activate {...props} />} />
      <PrivateRoute path="/private" exact component={Private} />
       <AdminRoute path="/admin" exact component={Admin} />
      <Redirect to='/' />
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

这是我的 app.jsx:

import "./App.module.scss";
import React,{ useState } from "react";
import {  Route,Redirect,Switch } from "react-router-dom";
import { isAuth } from "./helpers/auth";
import Navbar from "./components/Navbar/Navbar";
import Container from "./components/Container/Container";
import RightNavbar from "./components/RightNavbar/RightNavbar";
import Dashboard from './screens/Dashboard';
import Usage from './screens/Usage';
import Plan from './screens/Plan';
import Invoices from './screens/Invoices';
import Documentation from './screens/Documentation';


import NavContext from "./context/NavContext";
function App() {
  const [nav, setNav] = useState(false);
  const value = { nav, setNav };

  return (
    <div className="App">
      {isAuth() ? null : <Redirect to = '/login'/>}
      <NavContext.Provider value={value}>
        <Navbar />
        <Container
          stickyNav={<RightNavbar />}
          content={
            <Switch>
              <Route path="*" element={<main>NOT FOUND</main>} />
              <Route path="/" element={<Dashboard/>} />
              <Route path="/usage" element={<Usage/>} />
              <Route path="/plan" element={<Plan/>} />
              <Route path="/documentation" element={<Documentation/>} />
              <Route path="/invoices" element={<Invoices/>} />
            </Switch>
          }
        />
      </NavContext.Provider>
    </div>
  );
}

export default App;

Answer 1

您的 Navlink 正在工作，但您将此 <Redirect to='/' /> 代码放在索引组件的末尾，导致重定向到第一页。如果你删除它，你的问题就会解决。但我更喜欢使用 bootstrap 或 reactstrap

<div className="App">
      <NavContext.Provider value={value}>
        <div style={{ width: '100%', overflow: 'hidden' }}>
          <div style={{ width: '100px', float: 'left' }}>
            <Navbar />
          </div>
          <div style={{ marginLeft: '100px' }}>
            <Container
              stickyNav={<RightNavbar />}
              content={
                <Switch>
                  <Route path="/" exact component={Dashboard} />
                  <Route path="/usage" exact component={Usage} />
                  <Route path="/plan" exact component={Plan } />
                  <Route path="/documentation" exact
                  component={Documentation } />
                  <Route path="/invoices" exact component={Invoices } />
                </Switch>
              }
            />
          </div>
        </div>
      </NavContext.Provider>
    </div>

Answer 2

我猜问题出在下面一行：

<Route path='/' exact render={props => <App {...props} />

解决方法： <Route path='/' render={props => <App {...props} />

因为当我删除了 exact 关键字。我看到了一个深蓝色的导航栏。我想这就是你想看到的。

如果我未能解决或理解您的问题，请考虑我的道歉。因为我不是react js的专家（我只是一个想成为程序员的法学院学生）。

Answer 3

达尔山。我为您找到了另一个解决方案。我注意到当我使用 render 关键字而不是元素时，它会像 usage 和 hello 一样呈现 dom 中的元素。但问题是它只在响应式组件中起作用。

解决方法：使用渲染（如下所示）而不是元素

在App.jsx中：

<Switch>
<Route path="*" render={() => <main>NOT FOUND</main>} />}
<Route path="/dashboard" exact render={() => <Dashboard />}
<Route path="/usage" render={() => <Usage />}
<Route path="/plan" render={() => <Plan />}
<Route path="/documentation" render={() => <Documentation />}
<Route path="/invoices" render={() => <Invoices />}
</Switch>

我知道它不会解决整个问题，但至少可以帮助您解决问题。

React 中的组件未渲染

Components in react are not rendering

reactjs

react-router

react-router-dom