Open raana96 opened 3 years ago
I used nextjs-dynamic-routes in my router. all links is worked, but before refresh page , Shows me not found.
nextjs-dynamic-routes
--pages | |- -index | --blogs | | | |--index | |--[post]
[post].js
class Post extends React.Component{ state={ data:null, post:'', title:'', content:'', imageUid:'', status:0, loading:true } componentDidMount(){ console.log(this.props); this.setState({loading:true}); const post = Router.router.query.post; if(post != undefined){ if(this.state.data == null){ this.getPost(post); } } } getPost = async (post)=>{ const res = await this.props.setPostDetalis(post); this.setState({loading:false}),1000; this.setState({ title: res.data.data.object.title, content: res.data.data.object.content, imageUid: res.data.data.object.attachments[0].uid, data: res.data.data, status:res.data.status }); } componentDidUpdate(){ const post = Router.router.query.post; if(post != undefined){ if(this.state.data == null){ this.state.loading=true; this.getPost(post); } } } Keywords = () => { const data = this.state.data.tags.map((item) => item.title); return data.toString(); } render(){ return ( <div> {this.state.title} </div > ) } } const pagePost = withRouter(Post); const mapStateToProps = (state)=>{ return state } const mapDispatchToProps = { setPostDetalis : setPostDetalis } const pagePostIndex = pagePost; export default connect(mapStateToProps,mapDispatchToProps)(pagePostIndex);
router.js
const Router = require('nextjs-dynamic-routes') const router = new Router() router.add({ name: 'post', pattern: '/blogs/:post' }) module.exports = router
server.js
const express = require('express'); const next = require('next'); const { parse } = require('url'); const DEV = process.env.ENVIRONMENT !== 'production'; const PORT = 9000; const app = next({dir: '.', dev: DEV}); const handle = app.getRequestHandler(); const getRoutes = require('./routes'); const routes = getRoutes(); app.prepare().then(() => { const server = express(); //server.get('/blog/:id', (req, res) => ssrCache({ req, res })) server.get('*', (req, res) => { const parsedUrl = parse(req.url, true); const { pathname, query } = parsedUrl; const route = routes[pathname]; if (route) { return app.render(req, res, route.page, route.query); } return handle(req, res); }); server.listen(PORT, (err) => { if (err) throw err; console.log(`> READY FOR LIFOTFF http://localhost:${PORT}`); }); });
I used
nextjs-dynamic-routes
in my router. all links is worked, but before refresh page , Shows me not found.[post].js
router.js
server.js