一台路由器工作，另一台路由器不工作答案

【问题标题】：One router work but other router not work一台路由器工作，另一台路由器不工作
【发布时间】：2021-12-31 14:35:58
【问题描述】：

嘿，我有一个 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 你能告诉我为什么它不起作用吗？

（我用的是 react-router-dom 的 6.2.1）

【问题讨论】：

您使用的是哪个版本的 react-router？ v5 和 v6 中的行为不同。
（我用的是 react-router-dom 的 6.2.1）

标签： reactjs

【解决方案1】：

首先你需要提及你正在使用的版本，如果它适用于你，试试这个：-

你的组件应该看起来像这样，才能工作：-

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></>
        );

    };

注意：尝试使用 <BrowserRouter> </BrowserRouter> 包装 index.tsx 组件，如下所示：

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

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

【讨论】：

不起作用（我使用 react-router-dom 的 6.2.1）
这是你的 index.js 还是 app.js ？
它是我的 app.tsx 我的 index.tsx 包含一个 reactdom 渲染 `` ReactDOM.render(, document.getElementById('root'));```
我已经更新了答案，请检查
@Bagou450 嘿，我已经更新了整个答案，它肯定会起作用

【解决方案2】：

我认为您正在使用“react-router-dom”更新版本。 Switch不再是新版本。请在这里阅读 Switch' is not exported from 'react-router-dom'

【讨论】：

我在导入行“Routes as Switch”中写了我使用Routes no Switch

【解决方案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 />结构

【讨论】：

未找到在此服务器上未找到请求的 URL。不工作