路由器路径不正常？

Question

出于某种原因，我的路由器无法正常工作。 Switch 上方的第一条 Route 路径有效，但下方的两条路径无效。当我尝试在浏览器上遵循该路径时，它不起作用。我在网上找了一段时间，所以你们是我最后的希望。我检查了所有路径文件，但仍然没有运气。

谢谢

这是代码

import React  from 'react';
import Navbar from './Components/profileLayout/Navbar';
import Home from './Components/profileLayout/Home';
import './App.css';
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'
import SignIn from './Components/profileLayout/SignIn';
import Register from './Components/profileLayout/Register';

class App extends React.Component {

  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />
          <Home />
          <Route path='/' exact component={Home} />
            <Switch>
              <Route  path="/register" exact component={Register} />
              <Route  path="/signin"  exact component={SignIn} />
            </Switch>

        </div>
      </Router>
    );
  }
}


export default App;

Answer 1

全部放在switch组件里面

<Switch>
   <Route path='/' exact component={Home} />
   <Route  path="/register" exact component={Register} />
   <Route  path="/signin"  exact component={SignIn} />
</Switch>

Answer 2

像这样改变你的路线。将所有 Route 保留在 Switch 中并删除 <Home/> 在 <NavBar/> 之后，因为一旦页面加载了“/”路径

，它就会出现

  <Router>
    <div className="App">
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route  path="/register" exact component={Register} />
        <Route  path="/signin"  exact component={SignIn} />
      </Switch>
    </div>
  </Router>

路由器路径不正常？

Router path not functioning properly?

javascript

visual-web-developer

reactjs

react-router