Маршрут с идентификатором сообщения, отображаемый в других компонентах - PullRequest
Новая
       12

Маршрут с идентификатором сообщения, отображаемый в других компонентах

0 голосов
/ 31 марта 2019

Я изучаю роутер и избыточность. Я пытаюсь создать блог. Теперь маршрут с идентификатором записи отображается в других компонентах, таких как «О программе» и «Портфолио», но не на домашней странице, потому что я сделал его точным путем.

https://github.com/chiranjeebhub/router-redux

Post.js: 

import React, { Component } from "react";
import { connect } from "react-redux";

class Post extends Component {
  render() {
    const post = this.props.post ? (
      <div>
        <h4>{this.props.post.title}</h4>
        <p>{this.props.post.body}</p>
      </div>
    ) : (
      <div>
        <p>loading post ... </p>
      </div>
    );
    return <div>{post}</div>;
  }
}

const mapStateToProps = (state, ownProps) => {
  let id = ownProps.match.params.post_id;
  return {
    post: state.posts.find(post => post.id == id)
  };
};

export default connect(mapStateToProps)(Post);

Мои маршрутизаторы: 

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import NavBar from "./Components/NavBar";
import Home from "./Components/Home";
import About from "./Components/About";
import Post from "./Components/post";
import Portfolio from "./Components/portfolio";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <NavBar />
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/portfolio" component={Portfolio} />
          <Route path="/:post_id" component={Post} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

About.js 

import React, { Component } from "react";

class About extends Component {
  render() {
    return (
      <div>
        <h1>About Me</h1>
      </div>
    );
  }
}

export default About;

Редуктор 

const initState = {
  posts: [
    { id: "1", title: "title1", body: "body1" },
    { id: "2", title: "title2", body: "body2" },
    { id: "3", title: "title3", body: "body3" },
    { id: "4", title: "title4", body: "body4" }
  ]
};

const rootReducer = (state = initState, action) => {
  return state;
};

export default rootReducer;

Теперь, когда я загружаю компонент "О программе", из файла post.js появляется 101 "Загрузка сообщений ..."

1 Ответ

1 голос
/ 31 марта 2019

У вас проблема, потому что путь 

<Route path="/:post_id" component={Post} />

показывает, что в заполнителе post_id ожидается динамическое значение.Поскольку post_id - это просто заполнитель, использующий about, portfolio, 1 и т. Д., Поскольку параметры маршрута будут удовлетворять условию.

т.е. 

// All of them are valid
/about
/portfolio
/1

Итак, компонент Post отображается вместе с другими компонентами.

Поэтому вам следует обернуть компоненты Route компонентом Switch.Поскольку Switch компонент отображает только первый дочерний элемент, который соответствует пути, поэтому компонент Post не будет отображаться при использовании /about и /portfolio. 

import { BrowserRouter, Route, Switch } from 'react-router-dom';

 <BrowserRouter>
    <div className="App">
      <NavBar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/portfolio" component={Portfolio} />
        <Route path="/:post_id" component={Post} />
      </Switch>
    </div>
  </BrowserRouter>
...