How do I set fallback: false for this dynamic route set up #14803

TomDowling · 2020-07-02T18:25:47Z

TomDowling
Jul 2, 2020

I have set up a dynamic route, think it might be a bit of a bad build. However, I really don't want to start over to get the fallback to work. This issue is when I don't have a route it just goes to a white screen and not redirecting to the 404 page, all the code for dynamic route is on this one page, and is located at pages / portfolio / [id] / index.js.

`

import { withRouter } from "next/router";
import Router from 'next/router';
import Link from "next/link";
import Prismic from "prismic-javascript";
import "./../../../Styles/styles.less";
import Head from "./../../../Components/Layout/Markup/Head";
import Header from "./../../../Components/Layout/Header/Header";
import Footer from "./../../../Components/Layout/Footer/Footer";

class Portfolio extends React.Component {
constructor(props) {
super(props);
this.state = {
apiEndpoint: "***",
loading: true,
slug: this.props.router.query.id,
uid: "",
data: [],
};
}

componentDidMount() {
    this.setState({ slug: this.props.router.query.id });

    Prismic.api(this.state.apiEndpoint).then(api => {
        api.query(Prismic.Predicates.at("document.type", "portfolio")).then(
            response => {
                let filteredData = [];
                if (response) {
                    filteredData = response.results.map(result => {
                        console.log('Result...', result);

                        return { 
                            uid: result.slugs[0], 
                            title: result.data.title[0].text,
                            tags: result.tags,
                            banner: [result.data.banner.url, result.data.banner.alt],
                            body: result.data.body,
                            highlightedText: result.data.highlighted_text,
                            brief: result.data.brief
                        };
                    });

                    this.setState({ 
                        loading: false,
                        slug: this.props.router.query.id,
                        data: filteredData
                    });
                }
            }
        );
    });
}

activeItem(item) {
    let data = this.state.data;
    console.log(data)

    for(let i = 0; i < data.length; i++) {
        if (data[i].uid === item) {
            let item = data[i];

            return (
                <div className="project-page">
                    {console.log('Sandbox:', item.brief)}
                    <img src={ item.banner[0] } alt={ item.banner[1] } />
                    <Header />
                    <div className="container">
                        <h1>{ item.title }</h1>
                        <ul className="tags">
                            {item.tags.map((element, index) => <li key={index}>{element}</li>)}
                        </ul>
                        <p className="lead width-50">{ item.highlightedText[0].text }</p>
                        <h3 className="underline">Brief</h3>
                        <p className="width-50">{ item.brief[0].text }</p>
                        <h3 className="underline">Research</h3>
                        <p className="width-50">{ item.brief[0].text }</p>
                    {item.body.map(
                        function(element) {
                            return (
                                <div>
                                    { element.text }
                                </div>
                            );
                        }
                        )}
                    </div>
                    <Footer />
                </div>
            )
        }
    }
}

loadingText() {
    if(this.state.loading) {
        return (
            <>
                <Head />
                <Header />
                <h3>Loading...</h3>
            </>
        )
    }
}

pageNotFound() {
    if(this.state.uid !== this.state.slug) {
        // Router.push('/404');
    }
}


render() {
    this.loadingText();
    
    return (
        <>
            <Head />
            {this.activeItem(this.props.router.query.id)}
        </>
    )
}

}

export default withRouter(Portfolio);

`

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How do I set fallback: false for this dynamic route set up #14803

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

How do I set fallback: false for this dynamic route set up #14803

Uh oh!

Uh oh!

TomDowling Jul 2, 2020

Replies: 0 comments

TomDowling
Jul 2, 2020