reactjs - 路由重定向到 url 但不渲染视图

问题描述

我正在学习 Reactjs 和路由器，但我的页面被重定向到 url 但它不包含任何视图。之前查看

这是我的代码：

import "./App.css";

import React, { useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";

import HomePage from "./components/HomePage";
import QuestionPage from "./components/QuestionPage";
import firebase from "./util/firebase";

function App() {
  const [arr, setArr] = useState([]);
  const todoRef = firebase.database().ref("NoteDatabase");
  useEffect(() => {
    const todoRef = firebase.database().ref("NoteDatabase");
    todoRef.on("value", (val) => {
      const dbList = val.val();
      const list = [];
      for (let id in dbList) {
        list.push(dbList[id]);
      }
      setArr(list);
    });
  }, []);

  const addTopic = (question, answer, path, label) => {
    if (question != null && answer != null) {
      todoRef.push({
        path: path,
        label: label,
        questions: [
          {
            header: question,
            answer: answer,
          },
        ],
      });
    } else {
      todoRef.push({
        path: path,
        label: label,
        questions: [
          {
            header: 'question',
            answer: 'answer',
          },
        ]
      });
    }
  };
  return (
    <Switch>
      <Route exact path="/">
        <HomePage topics={arr} addTopic={addTopic} />
      </Route>

      {arr.map((item) => {
        console.log(item);
        return (
          <Route key={item.path} path={item.path} >
            <QuestionPage topic={item} addTopic={addTopic} />
          </Route>
        );
      })}
    </Switch>
  );
}

export default App;

问题页面：

import { Card } from "primereact/card";
import { Panel } from "primereact/panel";
import React from "react";
import ToolbarForQuestionPage from "./Toolbarjs";
export default function QuestionPage(props) {
  const addTopic = (question, answer, path, label) => {
    props.addTopic(question, answer, path, label);
  };
  const header = <ToolbarForQuestionPage label={props.topic.label} addTopic={addTopic}/>;
  const headerQues =(header)=> (<React.Fragment><p><i className="pi pi-question-circle p-px-2"></i> {header}</p></React.Fragment>);
  console.log('question page');
  return (
    <React.Fragment>
      
      <Card header={header}>
        {props.topic.questions && props.topic.questions.map((item) => {
          return (

            <div className="p-col-12 p-m-3">
              <Panel header={headerQues(item.header)} toggleable collapsed='true'>
              
                <p>
                 {item.answer}
                </p>
              </Panel>
            </div>
          );
        })}
      </Card>
    </React.Fragment>
  );
}

我的主页路由已加载，但是当我重定向到其他路由时只是发送到 url 但不包含任何视图。

#更新：我的 index.js：

import App from "./App";
import { BrowserRouter } from "react-router-dom";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

我的主页：

import "primereact/resources/themes/saga-blue/theme.css";
import "primereact/resources/primereact.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.css";

import { Button } from "primereact/button";
import ButtonJs from "./ButtonJs";
import { Card } from "primereact/card";
import React from "react";
import Toolbarjs from "./Toolbarjs";

export default function HomePage(props) {
  const addTopic = (question, answer, path, label) => {
    props.addTopic(question, answer, path, label);
  };
  const header = <Toolbarjs isTopic={false} addTopic={addTopic} />;
  return (
    <React.Fragment>
      <div className="p-col-12 p-lg-6 p-md-12 p-m-auto">
        <Card header={header}>
          <div className="p-grid">
            {props.topics.map((item) => (
              <ButtonJs key={item.label} topic={item} />
            ))}
          </div>
        </Card>
      </div>
    </React.Fragment>
  );
}

这是我使用链接（react-router-dom）的地方：

import { Button } from "primereact/button";
import { Link } from "react-router-dom";
import React from "react";

export default function ButtonJs({ topic }) {
    const styleLink = {
        textDecoration:'none'
    }
  return (
    <div className="p-col-12 p-text-center ">
      <Link style={styleLink} to={topic.path}>
        <Button
          onClick={() => {
            console.log(topic);
          }}
          className="p-button-outlined p-col-12"
        >
          <i className="pi pi-book p-px-2"></i>
          <span className="p-px-3">{topic.label}</span>
        </Button>
      </Link>
    </div>
  );
}

#更新更多：firebase连接没问题，我可以控制台。注销

(4) [{…}, {…}, {…}, {…}]
0: {label: "Hello1", path: "Hello1"}
1: {label: "Sin Hoc", path: "sin_hoc"}
2: {label: "asdsadas", path: "asdsadas"}
3:
  label: "njjjn"
  path: "njjjn"
  questions: Array(1)
  0: {answer: "answer", header: "question"}
  length: 1
  __proto__: Array(0)
__proto__: Object
length: 4
__proto__: Array(0)

这是我的主页但是如果我单击列表中的一个链接

标签： reactjsreact-router-dom

reactjs - 路由重定向到 url 但不渲染视图

问题描述

解决方案

推荐阅读