Блог

 const SearchInput = (props) =gt;{  const [value, setValue] = useState('');   const submit = () =gt;{  //How can I render the dynamic component and when the SSR fetch request is done update the URL   const router = useRouter();  return router.push(`/search/${value}`); //this way is chaning the URL :(  }  return (  lt;gt;  lt;input value={value} onChange={(e)=gt;setValue(e.target.value)} /gt;   lt;button onClick={}gt;Searchlt;/buttongt;  lt;/gt;  ) } export default SearchInput;  

Это вложенный динамический маршрутизатор SSR выглядит следующим образом

страницы/поиск/[Значение поиска].js

 export const search = async (searchValue) =gt; {  //this request retun a URL that needs to be shown in the browser  //How can I change the URL here?   const users = await axios.post(`/API/search`, {search: searchValue}).then(({data}) =gt; {  return data  })  return users } const SearchResult = ({downloads}) =gt;{   return (  lt;gt;  lt;SearchInput /gt;  lt;sectiongt;  {downloads.map((row)=gt;{  return lt;h1gt;{row.title}lt;/h1gt;  })}  lt;/sectiongt;    lt;/gt;  ) } export default SearchResult;  export const getServerSideProps = async (context) =gt; {  const { searchValue } = context.query;  const res = await search(searchValue);  return {  props: {  downloads: res,  url: res.link  }  } }  

Поскольку я использую рендеринг на стороне сервера, поэтому мне интересно, как я могу сначала получить запрос, а затем изменить URL-адрес?

Текущий подход работает, но сначала он изменяет URL-адрес, а затем отображает вложенный компонент. Чего я хочу добиться, так это сначала отобразить компонент SSR и получить запрос, а затем изменить URL-адрес. возможно ли это?