/Javascript/React/React-router-dom status code 301

React-router-dom status code 301

// client
<BrowserRouter>
  <App/>
</BrowserRouter>

// server (not the complete story)
<StaticRouter
  location={req.url}
  context={context}
>
  <App/>
</StaticRouter>

Source: v5.reactrouter.com

React-router-dom status code 301

const context = {};
const markup = ReactDOMServer.renderToString(
  <StaticRouter location={req.url} context={context}>
    <App />
  </StaticRouter>
);

if (context.url) {
  // Somewhere a `<Redirect>` was rendered
  redirect(301, context.url);
} else {
  // we're good, send the response
}

Source: v5.reactrouter.com

React-router-dom status code 301

function RedirectWithStatus({ from, to, status }) {
  return (
    <Route
      render={({ staticContext }) => {
        // there is no `staticContext` on the client, so
        // we need to guard against that here
        if (staticContext) staticContext.status = status;
        return <Redirect from={from} to={to} />;
      }}
    />
  );
}

// somewhere in your app
function App() {
  return (
    <Switch>
      {/* some other routes */}
      <RedirectWithStatus status={301} from="/users" to="/profiles" />
      <RedirectWithStatus
        status={302}
        from="/courses"
        to="/dashboard"
      />
    </Switch>
  );
}

// on the server
const context = {};

const markup = ReactDOMServer.renderToString(
  <StaticRouter context={context}>
    <App />
  </StaticRouter>
);

if (context.url) {
  // can use the `context.status` that
  // we added in RedirectWithStatus
  redirect(context.status, context.url);
}

Source: v5.reactrouter.com

Similar codes

8 votes224 views3 answers
Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Javascript React
0 vote216 views2 answers
Login with facebook expo react native
Javascript React
1 vote207 views1 answer
Could not find com.yqritc:android-scalablevideoview:1.0.4 react native video
Javascript React
0 vote204 views1 answer
React-simple-star-rating
Javascript React
0 vote220 views3 answers
How to get svg from pucblic folder in react
Javascript React
0 vote206 views1 answer
React native run on a particular emu
Javascript React
0 vote225 views1 answer
Usenavigate react router dom v6
Javascript React
0 vote218 views1 answer
Why to escape from quotation mark in react
Javascript React
0 vote284 views2 answers
Disable a button react
Javascript React
1 vote219 views1 answer
How to define state in react function
Javascript React