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

Question

我开发的应用程序运行良好，但有时当我单击链接时某些组件无法呈现。网址总是变化但不查看..所以请帮助我并告诉这个问题的永久解决方案。因为我坚持这个它为我创造了更多问题.. 请帮助..

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;

RouteJs 或 App 这是导入所有其他组件的App组件..

  import { BrowserRouter as Router, Route, Switch } from "react-router 
  dom";
  import Navbar from "./components/layouts/Navbar";
  import Landing from "./components/layouts/Landing";
  import Posts from "./components/posts/Posts";



 <Router>
  <Navbar />
  <Route exact path='/' component={Landing} />
  <section className='container'>
    <Alert />
    <Switch>
      <Route exact path='/register' component={Register} />
      <Route exact path='/login' component={Login} />
      <Route exact path='/profiles' component={Profiles} />
      <Route exact path='/profile/:id' component={Profile} />
      <PrivateRoute exact path='/dashboard' component={Dashboard} />
      <PrivateRoute exact path='/posts' component={Posts} />
      <PrivateRoute
        exact
        path='/create-profile'
        component={CreateProfile}
      />
      <PrivateRoute exact path='/edit-profile' component={EditProfile} />
      <PrivateRoute exact path='/add-education' component={AddEducation} 
       />
      <PrivateRoute
        exact
        path='/add-experience'
        component={AddExperience}
      />
       </Switch>
         </section>
         </Router>

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 更改但未查看或未呈现组件

React Router Issue:-URL changes but not view or not Rendering Component

reactjs

redux

react-router

react-router-v4