我对React比较陌生,我正在努力弄清楚如何让React路由工作.我有一个超级简单的测试应用程序,看起来像这样:

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

当我运行应用程序时,home组件会毫不费力地加载,当我单击"click Me"链接时,url会更改为localhost/about,但什么也没发生.如果我点击刷新,我会得到一个"无法获取/走动"很明显,我做错了什么,但我还没有弄清楚是什么.我也在使用Webpack.

推荐答案

你需要使用/的精确路径,否则它也将匹配/about.

<Route exact path="/" component={Home} />

正如 comments 中提到的,对于这样简单的事情,我建议使用Create React App,这将确保你的服务器代码和网页设置都是正确的.使用create-react-app后,只需使用npm安装react router v4包,然后将上面的代码放入App.js文件中,就可以了.您的代码有一些小改动,可以让它与create-react-app一起使用,如下所示:

// App.js
import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1><Link to="/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
)

export default App;

quick start instructions from React Router V4 documentation人会告诉你和我刚才解释的差不多.

Reactjs相关问答推荐

下拉Tailwind CSS菜单与怪异beviour

XChaCha20-Poly1305的解密函数

NextJS如何正确保存添加到购物车中的产品会话

Reaction上下文值无法传递给其他组件

安装使用环境的BIT组件的依赖项

Gitlab CI和VITE环境变量出现问题

定位数组中的一项(React、useState)

UseEffect 似乎不适用于页面的首次渲染

我发送的 prop 的值不会改变.如果成功登录,导航栏中的 prop 必须为 true.我从后端得到 200 ok

如何隐藏移动导航栏后面的向下滚动图标和文本?

Syncfusion:带有 TabItemsDirective 的选项卡组件不显示任何内容

有没有办法在用户离开页面时防止输入模糊?

当 React 中的状态发生变化时如何停止重新加载谷歌 map ?

我可以更改 styled() 中的响应吗? (MUI v5)

在 React 的父级中多次调用子级时从子级获取数据到父级

如何使用 React 在客户端获取 nestjs websocket 异常错误?

使用 React.UseEffect 从 api 获取但我的清理返回不起作用

NextJs - 如何从站点 map 生成器中删除重复的 URL?

服务器端分页未按预期工作

如何在组件文件夹内的react 组件文件中导入外部css文件?