Question

我有以下React代码：

App.js

    <?php
// https://wordpress.stackexchange.com/questions/284283/how-can-i-change-an-images-author

add_action('pmxi_saved_post', 'image_author', 10, 1);

function image_author($id) 
{

$user_id = get_post_field ('post_author', $id);


$args = array(
'post_parent' => $id,
'post_type' => 'attachment'
//,
// 'post_mime_type' => 'image'
);

$attachments = get_posts($args);
if($attachments) :
    foreach ($attachments as $attachment) : setup_postdata($attachment);
       $the_post = array();
       $the_post['ID'] = $attachment->ID;
       $the_post['post_author'] = $user_id;

       wp_update_post( $the_post );

   endforeach;
endif;    

}

?>

Header.js

import React from 'react';

import '../App.css';

import Header from "./Header"

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

Menu.js

import React, {Component} from "react";
import { BrowserRouter as Router, Route, Link, Switch, withRouter } from "react-router-dom";

import Menu from "./Menu"
import Landing from "./Landing"
import ShowWeather from "./ShowWeather"
import PictureSlider from "./PictureSlider"

class Header extends Component {
  render() {
    return (
      <div>
      <Router>
        <div className="headerMain">
          <div className="headerShadow stickyHeader hidV">
            <div className="headerInner hidV posRel">
              <a href="#" className="aLogoBtn">
                <span>
                  <img className="siteLogo" src="https://img.mypage.com/knife.png" />
                  <span className="siteName">LT</span>
                </span>
              </a>
              <Menu />
            </div>
          </div>
        </div>
        <Switch>
          <Route exact component={withRouter(Landing)} pattern="/" />
          <Route component={withRouter(ShowWeather)} pattern="/ShowWeather" />
          <Route component={withRouter(PictureSlider)} pattern="/PictureSlider" />
        </Switch>
      </Router>
      </div>
    )
  }
}

export default Header

我遇到的问题是，当我单击链接时，URL发生了变化，但组件保持不变，它始终显示import React, {Component} from "react" import { Link } from 'react-router-dom'; class Menu extends Component { render() { return ( <div className="hidV posAbs" style={{"right": 0}}> <input type="checkbox" className="menu-btn" id="menu-btn" /> <label htmlFor="menu-btn" className="menu-icon"><span className="navicon"></span></label> <ul className="menu"> <li> <Link to="/">Home</Link> </li> <li> <Link to="/ShowWeather">Weather</Link> </li> <li> <Link to="/PictureSlider">Picture Slider</Link> </li> </ul> </div> ) } } export default Menu组件。

我是React的新手，所以我们将不胜感激。

Answer 1

在path组件上使用pattern代替Route。

Answer 2

如下更新您的路线-

<Switch>
   <Route exact component={withRouter(Landing)} path="/" />
   <Route component={withRouter(ShowWeather)} path="/ShowWeather" />
   <Route component={withRouter(PictureSlider)} path="/PictureSlider" />
</Switch>

为什么我的URL改变了但我的组件却没有改变

2 个答案: