反应路由器不工作

Posted 2023-02-24

【中文标题】反应路由器不工作

【英文标题】：React-Router not working

【发布时间】：2018-04-05 03:20:11

【问题描述】：

我很抱歉提出类似的问题 React Router v4 routes not working

因为我没有足够的声誉来评论答案，所以我创建了新问题

对此我感到非常抱歉

实际上我有同样的问题，我已经尝试了答案中的解决方案 并关注https://reacttraining.com/react-router/web/guides/quick-start 但是当我尝试在路线上添加“精确”时，它什么也不显示

我用

"react": "^16.0.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

这是我的 app.js 代码

'use strict'

import React from 'react';
import render from 'react-dom';
import 
  BrowserRouter,
  Route
 from 'react-router-dom';
import Home from './home/home.js'
import Login from './login/'
import SignUp from './login/SignUp/'

render((
  <BrowserRouter>
    <div>
      <Route path="/" component=Login />
      <Route path="/home" component=Home />
    </div>
  </BrowserRouter>
),document.getElementById('container'));

**编辑

这是我的文件夹结构

** 编辑

我终于找到了解决方案， 这是我的 app.js 代码 '使用严格'

import React from 'react';
import ReactDOM from 'react-dom';
import 
  HashRouter as Router,
  Switch,
  Route
 from 'react-router-dom';
import Home from './home/home.js'
import Login from './login/'
import SignUp from './login/SignUp/'

ReactDOM.render((
  <Router>
    <Switch>
      <Route exact path="/" component=Login />
      <Route path="/signup" component=SignUp />
      <Route path="/home" component=Home />
    </Switch>
  </Router>
),document.getElementById('container'));

谢谢

【问题讨论】：

您将登录和主页组件保存在哪里？我可以知道路径吗？因为在导入时您提到了不完整的路径 './login/SignUp/'

对此我很抱歉，我认为问题不是来自组件路径，因为我尝试用其他组件更改 及其正常工作。我的问题是当我尝试使用超过 1 条路线时，我无法访问除路线根路径之外的其他路线

我正在删除我的帖子，因为我犯了一个错误。对不起。 BrowserRouter 将呈现与给定模式匹配的所有 Routes。如果我们使用<Switch>，则只会渲染第一个匹配的<Route>。 reacttraining.com/react-router/web/api/Switch

我已经尝试将 更改为 ，如果我转到 http:localhost/my，我想确认 的某些内容-project/ 它会显示登录组件，对吗？当 url http:localhost/my-project/home 它会显示 Home 组件（在我的路由代码中），但它没有找到我认为问题可能在 url

React Router failed prop 'history', is undefined的可能重复

【参考方案1】：

你必须导入BrowserRouter as Router

import React from 'react';
import ReactDOM from 'react-dom';
import 
  BrowserRouter as Router,
  Switch,
  Route
 from 'react-router-dom';
import Home from './home/home.js'
import Login from './login/'
import SignUp from './login/SignUp/'

ReactDOM.render((
  <Router>
    <Switch>
      <Route exact path="/" component=Login />
      <Route path="/signup" component=SignUp />
      <Route path="/home" component=Home />
    </Switch>
  </Router>
),document.getElementById('container'));

【讨论】：

我之前尝试过，但仍然无法正常工作，但谢谢@nicholas

"您必须将 BrowserHistory 导入为路由器" 这是一个错字吗？