javascript - 路由器路径不正常?

标签 javascript reactjs react-router visual-web-developer

出于某种原因,我的路由器无法正常工作。 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;

最佳答案

将它们都放在 switch 组件中。

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

关于javascript - 路由器路径不正常?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58944874/

相关文章:

redirect - Amazon S3 重定向规则 - 保留查询参数

javascript - 将输入默认为一种文本?

javascript - bluebird 中的 Promise.all() 是否等待迭代器?

javascript - D3 折线图 - 错误 : <path> attribute d: Expected number

Javascript - 在变量中添加换行符

reactjs - 防止 AWS Amplify 添加尾部斜杠并强制重定向

reactjs - 为 `match` 连接 React Router 和 TypeScript

reactjs - 按日期过滤 react 管理查询

node.js - 即使在设置 sameSite :'none' 和安全 : true for a MERN stack web app 后,cookie 也不会保存在 chrome 中

javascript - React Css Themr 不工作