How to use react router in the frontend?

when I used react-router-dom for the frontend routing, the link changed from “http://127.0.0.1:8000/?canisterId=rno2w-sqaaa-aaaaa-aaacq-cai” to “http://127.0.0.1:8000/post” and I could not get the page.

here is my code:

route:

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import Home from './Home';
import Update from './Update';
import Post from './Post';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Home}/>
        <Route path="/home" component={Home}/>
        <Route path="/update" component={Update}/>
        <Route path="/post" component={Post}/>
      </Switch>
    </Router>
  );
}

export default App;

link:

            <Router>
              <Link to="/post" >
                <Button type="primary" className='postbutton' size="large" >Post a Job</Button>
              </Link>
            </Router>

is there a way to route the pages in the frontend or backend?

I do something similar in Vue: React Router: Declarative Routing for React.js

2 Likes

Best way currently is to use the HashRouter instead of the BrowserRouter. This will fix your problem.

9 Likes

Thanks for all answers! (ps: At last, I found a <Drawer \> component meet my needs. )

1 Like