Question

我的一个组件出现问题，其中 React 路由器在访问它时返回一个空白页面。它只发生在一个组件中，我不知道为什么。有问题的组件是 EditPost 组件。

App.js 这是所有路线的所在。

df %>% 
  mutate(Supplement = ifelse(supp == "VC",
                        "VC",
                        "OJ"),
         Dose = ifelse(dose == "0.5",
                           "0.5",
                           "1.0"),
         Interaction = factor(str_replace(interaction(Supplement, Dose),
                                          '\\.', '\n'),
                              ordered=TRUE)) %>% 
  ggplot(aes(x = Interaction, y = len, fill = Interaction)) + 
  geom_flat_violin(position = position_nudge(x = .2, y = 0),
                   alpha = .8) +
  geom_point(aes(shape = Dose),
             position = position_jitter(width = .05),
             size = 2, alpha = 0.8) +
  geom_boxplot(width = .1, outlier.shape = NA, alpha = 0.5) +
  coord_flip() +
  labs(title = "Effect of Supplement and Dose on Length",
       y = "Growth Length") +
  scale_fill_discrete(guide = guide_legend(override.aes = list(shape = c(".", ".")))) +
  scale_shape_discrete(guide = guide_legend(override.aes = list(size = 3))) +
  theme_classic() +
  raincloud_theme

EditPost.js 这是不渲染的组件

import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home.js";
import Signup from "./components/signup/Signup";
import Login from "./components/Login/Login";
import Dashboard from "./components/Dashboard/Dashboard";
import PrivateRoute from "./components/common/PrivateRoutes";
import { Provider } from "react-redux";
import Store from "./Store";
import { Provider as AlertProvider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";
import { loadUser } from "./actions/auth";
import { useEffect } from "react";
import PostPage from "./components/PostPage/PostPage";
import EditPost from "./components/EditPost/EditPost";

// Alert options
const alertOptions = {
  timeout: 3000,
};

function App() {
  useEffect(() => {
    Store.dispatch(loadUser());
  }, []);

  return (
    <div className="App">
      <Provider store={Store}>
        <AlertProvider template={AlertTemplate} {...alertOptions}>
          <Router>
            <Switch>
              <Route exact path="/post-edit/:id" component={EditPost} />
              <Route exact path="/signup" component={Signup} />
              <Route exact path="/login" component={Login} />
              <PrivateRoute exact path="/dashboard" component={Dashboard} />
              <Route exact path="/" component={Home} />
              <Route exact path="/post/:id" component={PostPage} />
            </Switch>
          </Router>
        </AlertProvider>
      </Provider>
    </div>
  );
}

export default App;

Post.js 在这个组件中是指向 EditPost 组件的链接。

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";
import { connect } from "react-redux";
import { updatePost } from "../../actions/posts";

const EditPost = (props) => {
  console.log(props);
  const [title, setTitle] = useState(props.location.postData.title);
  const [description, setDescription] = useState(
    props.location.postData.description
  );
  const [body, setBody] = useState(props.location.postData.body);

  const titleChange = (e) => {
    setTitle(e.target.value);
  };

  const bodyChange = (e) => {
    setBody(e.target.value);
  };

  const desChange = (e) => {
    setDescription(e.target.value);
  };

  const addClick = (e) => {
    e.preventDefault();
    const post = { title, body, description };
    props.updatePost(post);
  };

  return (
    <div className="mt-4">
      <h1>Edit Post</h1>
      <Form>
        <Form.Group>
          <Form.Label>Post Title</Form.Label>
          <Form.Control onChange={titleChange} type="text" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Short Description</Form.Label>
          <Form.Control onChange={desChange} type="text" />
        </Form.Group>
        <Form.Group>
          <Form.Label>Body</Form.Label>
          <Form.Control onChange={bodyChange} as="textarea" rows={3} />
        </Form.Group>
        <Button onClick={addClick} variant="primary" type="submit">
          Edit
        </Button>
      </Form>
    </div>
  );
};

const mapDispatchToProps = (dispatch) => {
  return {
    updatePost: (id, post) => dispatch(updatePost(id, post)),
  };
};

export default connect(null, mapDispatchToProps)(EditPost);

现在我只是想渲染组件，然后我会担心道具。提前致谢。

Answer 1

您的链接是 ... private Constraint c1(ConstraintFactory constraintFactory) { return constraintFactory.from(Entity.class) .filter(e -> !(3.0 * e.getX1() + 5.0 * e.getX2() < 5.0 )) .penalize("C1", HardSoftScore.ONE_HARD); } private Constraint c2(ConstraintFactory constraintFactory) { return constraintFactory.from(Entity.class) .filter(e -> !(2.0 * e.getX1() - 6.0 * e.getX2() > 0.0 )) .penalize("C2", HardSoftScore.ONE_HARD); } private Constraint min(ConstraintFactory constraintFactory) { return constraintFactory.from(Entity.class) .penalize("MIN", HardSoftScore.ONE_SOFT, e -> (int)(-e.getX1() + 6.0 * e.getX2())); } ...。您匹配的路径是 /edit-post/${props.id}。

/post-edit/:id 和 edit-post 不是一回事 ?

我建议在 post-edit 的末尾添加一个 NoMatch 块。它将帮助您更快地诊断这些问题。

Switch

React路由器在所有路由上使用精确呈现空白页面

1 个答案: