Problem redirecting links to custom page

[van-vince]

I have created a simple custom page to activate users after clicking on a token link from Nodejs server. The problem is when I test the page by manually entering the url into the browser, it works perfectly but when I click on the token link in gmail, it gives 404 page not found. I dont know what the problem is. can someone help me.. I used the same approach in a normal react app and it works perfectly so it looks like the problem is with my refine.
This is the url from nodjs
const activationUrl = http://127.0.0.1:5173/activation/${activationToken};

          App.tsx
          import  Activation from "./pages/auth/activation";
          .....
          <BrouserRouter>
          ....
          <Refine>
          ........
          <Routes>
          .......
                          <Route
                            element={
                              <Authenticated fallback={<Outlet />}>
                                <NavigateToResource />
                              </Authenticated>
                            }
                          >
                            <Route path="/login" element={<Login />} />
                            {/* <Route path="/register" element={<Register />} /> */}
                            <Route path="/activation/:activation_token" element={<Activation />} />  //activation page url
                            <Route path="/forgot-password" element={<ForgotPassword />} />
                          </Route>
                        </Routes>
          ............
          <BrouserRouter/>

[aliemir]

Hey @van-vince, sorry for the issue!

Do you have the /activation/:activation_token: path served from another server/app? If it is, then you might have the routes conflicting and maybe react-router/your app is picking up the url before the other server 🤔

Or you might want to check your deployment configuration to see if it's properly adjusted to mount React and your app when a custom url is hit. By default some deployment platforms handle this automatically when you're trying to deploy your React app with client side navigation/rendering but some are not. You might want to check the guides about your deployment setup 🙏

Let me know if I can help any further 🚀

[van-vince]

@aliemir I realised that when I remove the dot notation in the jwt token the redirection works perfectly. Jwt tokens comes in 3 parts joined together with dots(.) like.
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
so please what is the problem and how can I solve it.

[aliemir]

I think this is related with the how react router handles parameters in its paths. When you have . in your parameter I think it breaks the routing, probably handling it as a separate route 🤔 You can switch to using a url param like ?token=<YOUR_TOKEN> or replace the dots on fly with something else and replace them again 🤔

[van-vince]

So I finally found the and on stackoverflow https://stackoverflow.com/questions/36923466/dot-and-hyphen-disallowed-react-router-url-parameters
add to webpack config

...
devServer: {
  proxy: {
    '/*.*': { // Match all URL's with period/dot
      target: 'http://localhost:8080/',  // send to webpack dev server
      rewrite: function(req){
        req.url='index.html';  // Send to react app
      }
    }
  }
}
...

If you are using Vite then this plugin will solve the issue:

Install it as a dev dependency
npm install --save-dev vite-plugin-rewrite-all

Add the plugin to your vite.conf.js file
import pluginRewriteAll from 'vite-plugin-rewrite-all'; // <= import the plugin

export default defineConfig({
  plugins: [
    react(),
    pluginRewriteAll() // <= add the new plugin
  ],
})

Source: https://github.com/ivesia/vite-plugin-rewrite-all