Question

我开始尝试使用react路由器和动态匹配。我想创建一个函数，将URL的slug与JSON文件中的slug匹配。我得到的错误： TypeError：无法获取属性＆＃39; slug＆＃39;未定义或空引用

我认为＆＃39; Slug＆＃39;网址是未定义的，但我不确定如何解决它。

我的routes.js代码：

＆＃13;

import React from 'react';
import Header from './components/header/header.js';
import Home from './components/home/home.js';
import About from './components/about/about.js';
import NotFound from './components/notFound/notFound.js'
import { BrowserRouter as Router, Route,  Switch } from "react-router-dom";
import PostPage from './components/postpage/postpage.js'
import posts from './files/data.json';

class Routes extends React.Component {
render(){
    return (
        <Router>
            <div>
            <Header />
            <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About}/>
    <Route path="/home" component={Home}/>
    <Route path="/:slug" component={props => {
        const postt = posts.posts.filter (post => props.params.slug === post.slug)
        console.log(postt.length)
        return <PostPage post={postt} />
    } } />
    }}/>
    <Route component={NotFound} />
            </Switch>

            </div>
        </Router>
    );
}
}

export default Routes;

＆＃13;

PostsPage.js：

＆＃13;

import React from 'react';

import Post from '../post/post.js'

const PostPage = (props) => (
            <div>
                 <Post {...props.post}/>
            </div>
);
export default PostPage;

＆＃13;

和posts.js：

＆＃13;

import React from 'react'; 
import { Link } from 'react-router-dom';
import './post.css';

class Post extends React.Component {
    render(){
        return(
            <div>
                <div >
                <h2 className='subTitle'><Link to={`/post/${this.props.slug}`} className='link'>{this.props.title}</Link></h2>
                <p className='content'>{this.props.excerpt}</p>

            </div>
            </div>
        );
    }
}

export default Post;

＆＃13;

如果你做到这一点，那就谢谢你的帮助

Answer 1

slug变量是在你缺少的匹配道具中给出的。

<Route path="/:slug" render={props => {
        const postt = posts.posts.filter (post => props.match.params.slug === post.slug)
        console.log(postt.length)
        return <PostPage post={postt} />
    } } />
    }}/>

此外，不要内联component而是使用渲染功能。来自文档：

当您使用组件（而不是渲染或子项，下面）时 router使用React.createElement从中创建一个新的React元素给定的组件。这意味着如果你提供内联函数组件prop，您将在每次渲染时创建一个新组件。这个导致现有组件卸载和新组件安装而不是仅更新现有组件。使用时内联渲染的内联函数，使用渲染或儿童道具（下图）。

https://reacttraining.com/react-router/web/api/Route/render-func

Answer 2

修复此问题的方法之一是使用.find()代替.filter()，如下所示：

 const postt = posts.find (post => props.match.params.slug === post.slug)

然后在<Router />内，确保发送剩余的{...props}：

   <Route path="/:slug" component={props => {
        const postt = posts.find (post => props.match.params.slug === post.slug)
        console.log(postt.length)
        return <PostPage post={postt} {...props} />
    } } />

将路由器段塞与阵列

2 个答案: