我是Next.js 的新手，我想知道如何从起始页 ( / )重定向到/hello-nextjs例如。一旦用户加载页面，然后确定路径 === /重定向到/hello-nextjs
在react-router 中，我们执行以下操作：
<Switch>
<Route path="/hello-nextjs" exact component={HelloNextjs} />
<Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} />
</Switch>
为什么当我使用 URL 中的正确 id 刷新页面时，router.query 为空，但当我通过 导航到该页面时，它却有效？
说我有/pages/[user]/index.js
<Link
href="/[user]/media/[mediaId]"
as={`/${username}/media/${post.id}`}
>
这个链接带我去localhost:3000/testuser/media/some-id
然后在/pages/[user]/media/[mediaId].js中
const MediaPage = () => {
const [post, setPost] = useState([]);
const router = useRouter();
const { mediaId } = router.query;
useEffect(() => {
router.prefetch("/");
}, []);
useEffect(() => {
if (!mediaId) return null;
getPostImage();
async function getPostImage() {
try {
const { data } = await API.graphql({
query: postById,
variables: {
id: mediaId,
},
});
setPost(data.postById.items[0]);
} catch (err) {
console.log("error getPostImage", …当我调用 withRouter 时，我能够在数据第二次呈现时看到输出。
我的组件如下所示：
const Home = (props) => {
console.log("all props", props)
let { router } = props
let { category, item } = router.query
console.log("Cat", category)
console.log("Item", item)
return (
<FirebaseContext.Provider value={new Firebase()}>
<div>
<Head>
<title>Category</title>
</Head>
<Navigation />
{/* <Item category={category} item={item} {...props} /> */}
</div>
</FirebaseContext.Provider>
)
}
Home.getInitialProps = async (props) => {
console.log(props)
return { req, query }
}
export default compose(withRouter, withAuthentication)(Home)
如果你看控制台，第一个渲染看起来像：
asPath: "/c/cigars/1231"
back: ƒ ()
beforePopState: ƒ ()
events: {on: …我想根据路由动态加载一个组件。我正在尝试制作一个可以加载任何单个组件以进行测试的页面。
但是，每当我尝试这样做时，import(path)它都会显示加载器但从未真正加载过。如果我对path包含的完全相同的字符串进行硬编码，则它可以正常工作。是什么赋予了？如何让nextjs实际动态导入动态导入？
// pages/test/[...component].js
const Test = () => {
const router = useRouter();
const { component } = router.query;
const path = `../../components/${component.join('/')}`;
console.log(path === '../../components/common/CircularLoader'); // prints true
// This fails to load, despite path being identical to hard coded import
const DynamicComponent = dynamic(() => import(path), {
ssr: false,
loading: () => <p>Loading...</p>,
});
// This seems to work
const DynamicExample = dynamic(() => import('../../components/Example'), {
ssr: false,
loading: () => <p>Loading...</p>,
}); …router.query.title当我刷新页面时消失。
据我发现，我必须使用 getServerSideProps，但我不知道在 getServerSideProps 上输入什么。或者有什么办法可以做到吗？
编辑：我尝试了 Yilmaz 的解决方案并删除了 as={} 现在它可以工作了。但是现在查询链接太长而不使用 as={} 有什么解决方案吗？
索引.tsx
const Projects = () => {
const [projects, setProjects] = useState(data);
{projects.slice(0, loadMore).map((project) => (
<Link
key={project.id}
href={{
pathname: "/projects/" + project.title,
query: {
id: project.id,
category: project.category,
title: project.title,
image: project.image.src,
image1: project.image1.src,
image2: project.image2.src,
image3: project.image3.src,
image4: project.image4.src,
image5: project.image5.src,
},
}}
as={"/projects/" + project.title}
passHref={true}
>
}
[id].tsx
import { GetServerSideProps } from "next";
export const getServerSideProps: GetServerSideProps = async (context) => { …query-string typescript reactjs server-side-rendering next.js
next.js ×5
reactjs ×4
react-router ×2
html ×1
query-string ×1
react-hooks ×1
router ×1
routing ×1
typescript ×1