One router work but other router not work

Question

Hey i have a reactjs app with this as app.tsx

    import tw from 'twin.macro';
    import { hot } from 'react-hot-loader/root';
    import { Route, BrowserRouter as Router, Routes as Switch } from 'react-router-dom';
    import Main from './Main';
    import Test from './Test';

    const App = () => {
        return (
            <><Main /><div css={tw`mx-auto w-auto`}>
                <Router>
                    <Switch>
                    <Route path="/element" element={<Test />} />
                    <Route path="/" element={<Main />} />
                    </Switch>
                </Router>
            </div></>
        );

    };

    export default hot(App);

But when i run a ./node_modules/.bin/webpack --watch --progress the localhost/ work but localhost/element not work i have a 404 error Not Found The requested URL was not found on this server Can you tell me why its not work?

(i use 6.2.1 of react-router-dom)

Which version of react-router are you using? The behavior is not the same in v5 and v6. — Stéphane Veyret, Dec 31 '21 at 14:38

score 0 · Answer 1 · answered Dec 31 '21 at 14:45

0

I think you're using ‘react-router-dom’ newer version. Switch is no longer in the new version. please read here Switch' is not exported from 'react-router-dom'

answered Dec 31 '21 at 14:45

Shah

1
1

I write in import line "Routes as Switch " i use Routes no Switch – Bagou450 Dec 31 '21 at 14:49

Ahmed Hosny · Accepted Answer · 2022-01-01T11:44:30.263

0

first and foremost you need to mention the version you are using , and try this if it works for u :-

your components should look like this, to work:-

import tw from 'twin.macro';
    import { hot } from 'react-hot-loader/root';
    import { Route, Routes} from 'react-router-dom';
    import Main from './Main';
    import Test from './Test';

    const App = () => {
        return (
            <><Main /><div css={tw`mx-auto w-auto`}>
               
                    <Routes>
                        <Route exact  path="/element" element= {<Test />} />
                        <Route exact  path="/" element= {<Main/>} />
                    </Routes>              
            </div></>
        );

    };

NB: try to wrap your index.tsx component with the <BrowserRouter> </BrowserRouter> like this :

import { BrowserRouter } from "react-router-dom";
ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.getElementById('root'))

therefore you can remove the BrowserRouter from the app.tsx

edited Jan 01 '22 at 11:44

answered Dec 31 '21 at 14:51

Ahmed Hosny

370
4
16

Not work (i use 6.2.1 of react-router-dom) – Bagou450 Dec 31 '21 at 14:58
is this your index.js or app.js ? – Ahmed Hosny Dec 31 '21 at 15:00
Its my app.tsx My index.tsx contain a reactdom render ``` ReactDOM.render(, document.getElementById('root'));``` – Bagou450 Dec 31 '21 at 15:06
well i have updated the answer please check – Ahmed Hosny Dec 31 '21 at 17:03
@Bagou450 hey i have updated the entire answer it will definitely work – Ahmed Hosny Jan 01 '22 at 08:22
Switch not exist on last my react router dom version see https://stackoverflow.com/questions/53972254/react-router-switch-not-working-as-expected – Bagou450 Jan 01 '22 at 09:56
oh no i forgot to remove the Switch , check now it will work. – Ahmed Hosny Jan 01 '22 at 11:45
Route can t have exact " La propriété 'exact' n'existe pas sur le type 'IntrinsicAttributes & LibraryManagedAttributes<(_props: PathRouteProps | LayoutRouteProps | IndexRouteProps) => ReactElement<...> | null, PathRouteProps | ... 1 more ... | " but i try without wait – Bagou450 Jan 01 '22 at 17:17
mhh now its work thanks but how i can extract it to my nginx server because actualy i use `node ./node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development ./node_modules/.bin/webpack --progress` But route not work on web server because i have only a index.html – Bagou450 Jan 01 '22 at 17:20
i really dont know about nginx server , please accept this as answer so it will be closed , you can post about nginx server as another question and hopefully you will find an answer like this one happy new year bro – Ahmed Hosny Jan 01 '22 at 19:16

score 0 · Answer 3 · answered Dec 31 '21 at 15:00

import { Route, BrowserRouter as Router, Routes as Switch } from 'react-router-dom';

function App() {

  const Main = () => {
    return (
      <h1>Main</h1>
    )
  } 
  
  const Test = <h1>Test</h1>

  return (
    <div >
        <Router>
            <Switch>
                <Route path="/element" element={<Main />} />
                <Route path="/" element={Test} />
            </Switch>
        </Router>
    

    </div>
  );
}

export default App;

You need to use the <Main /> structure

Not Found The requested URL was not found on this server. not work — Bagou450, Dec 31 '21 at 15:02

One router work but other router not work

3 Answers3