"反应" 两条路由一起输出

Question

我做了两条路线。

问题是，当我进入"主"组件时，我也会在底部得到一个"NotFound"页面。

我该怎么办？ 我已经尝试了 10 个小时的所有方法，但我不太确定我哪里出错了。

app.tsx

import NoProduct from './pages/Product/NoProduct'
import NotFound from './pages/NotFound/NotFound'
import { hot } from "react-hot-loader";
import { QueryClient ,QueryClientProvider } from 'react-query'
import { Route,BrowserRouter, Redirect, Switch, useLocation} from 'react-router-dom';
import Main from './pages/Main/Main'
function App() { 
return (
<div>
<Switch>
<QueryClientProvider client={queryClient}>
<Route exact path="/" component={Main} />
<Route path="*" component={NotFound} />
</QueryClientProvider>
</Switch>
</div>
) 
}

export default hot(module)(App);

索引.tsx

ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

Answer 1

问题

您没有将Route组件渲染到Switch中，因此Switch返回QueryClientProvider，然后像Router一样以包含方式呈现路由。

溶液

将Switch移动到QueryClientProvider组件中，以便它可以按预期匹配和呈现单个路由。

function App() { 
return (
<div>
<QueryClientProvider client={queryClient}>
<Switch>
<Route exact path="/" component={Main} />
<Route path="*" component={NotFound} />
</Switch>
</QueryClientProvider>
</div>
) 
}

Answer 2

你可以从BrowserRouter组件包装你的Switch组件，然后你的代码应该可以工作，

下面是示例：

<BrowserRouter>
<Switch>
<Route exact path="/" component={Main} />
<Route path="*" component={NotFound} />
</Switch>
</BrowserRouter>

如果您使用的是BrowserRouter组件，那么您QueryClientProvider导致问题，将其移出Switch然后它应该可以工作。

Answer 3

<BrowserRouter>
<Switch>
<Route exact path="/" component={Main} />
<Route path="/error" component={NotFound} />
<Redirect to="/error" />
</Switch>
</BrowserRouter>

Answer 4

更改路由路径，* 表示任何内容，因此它也会在第一个路由中呈现

<Route path="/error" component={NotFound} />

或者第二种解决方案是，使用exact，我希望这也有效

<Route exact path="*" component={NotFound} />

更好的解决方案是用QueryClientProvider包裹Switch