Question

我开发的App运行良好，但是当我单击链接时有时某些组件无法渲染。网址总是会更改，但不会查看。.请帮助我，并告诉您此问题的永久解决方案。因为我一直坚持下去，这给我带来了更多问题。请帮助。

   export const AppConstants = {
        ADD_EMPLOYEE : "ADD_EMPLOYEE",
    }

RouteJs或应用 这是App组件，所有其他组件均已导入。

import React, { Fragment } from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";
import Moment from "react-moment";

const PostItems = ({
post: { _id, text, name, avatar, user, likes, comments, date }
}) => {
const auth = useSelector(state => state.auth);
return (
<Fragment>
  <div className='post bg-white p-1 my-1'>
    <div>
      <Link to='/profile'>
        <img className='round-img' src={avatar} alt='' />
        <h4>{name}</h4>
      </Link>
    </div>
    <div>
      <p className='my-1'>{text}</p>
      <p className='post-date'>
        <Moment format='YYYY-MM-DD'>{date}</Moment>
      </p>
      <button type='button' className='btn btn-light'>
        <i className='fas fa-thumbs-up'></i>
        <span>{likes.length > 0 && <span>{likes.length}</span>}</span>
      </button>
      <button type='button' className='btn btn-light'>
        <i className='fas fa-thumbs-down'></i>
      </button>
      <Link to='/post/${_id}' className='btn btn-primary'>
        Discussion{" "}
        <span className='comment-count'>
          {comments.length > 0 && <span>comments.length</span>}
        </span>
      </Link>
      {!auth.loading && user === auth.user._id && (
        <button type='button' className='btn btn-danger'>
          <i className='fas fa-times'></i>
        </button>
      )}
    </div>
    </div>
   </Fragment>
   );
  };
  export default PostItems;

Answer 1

 <Link to='/profiles'>
    <img className='round-img' src={avatar} alt='' />
    <h4>{name}</h4>
  </Link>
 <Link to={ "/post/" + id } className='btn btn-primary'>
   Discussion{" "}
   <span className='comment-count'>
   {comments.length > 0 && <span>comments.length</span>}
   </span>
</Link>

您在拼写上犯了错误，它与任何路线/配置文件都不匹配。

没有任何与/ post / $ id相关的路由，请检查您的路由文件中是否存在

import React, { Component } from 'react';
import history from './history';
import {Route,Router, Switch } from 'react-router-dom';
import App from './App'
import Demo from './Demo'
class Routes extends Component {
 render() {
  return (
  <Router history={history}>
      <Switch>
        <Route exact path="/" component={App}/>
        <Route exact path="/demo" component={Demo}/>
      </Switch>
  </Router>
 );
 }
}
export default Routes

安装历史记录npm库并在src文件夹中创建history.js文件并添加以下行

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

我认为这样就可以路由

React Router问题：-URL更改但未查看或未渲染组件

1 个答案: