一个路由器工作，但另一个路由器不工作

Question

嘿，我有一个reactjs应用程序，它是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);

但当我运行./node_modules/.bin/webpack --watch --progress时，localhost/工作，但localhost/element不工作，我有404错误找不到此服务器上找不到请求的URL你能告诉我为什么它不起作用吗？

(我使用反应路由器dom的6.2.1(

Answer 1

首先，您需要提到您正在使用的版本，如果它适用于u:-，请尝试

您的组件应该是这样的，才能工作：-

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：尝试用<BrowserRouter> </BrowserRouter>包装您的index.tsx组件，如下所示：

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

因此，您可以从app.tsx 中删除BrowserRouter

Answer 2

我认为您使用的是"react router dom"更新版本。Switch已不在新版本中。请阅读这里交换机'；不是从'；react路由器dom'；

Answer 3

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;

您需要使用<Main />结构