React Router 路线 v4 不起作用

我的反应和试图了解如何制作 React router 工作。 我有一个超级简单的测试应用程序,如下所示:


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</h1>
const About = // => <h1>About Us</h1>

const Test = // => /
<router>
<switch>
<route component="{Home}" path="/"></route>
<route component="{About}" path="/about"></route>
</switch>
</router>
/

ReactDOM.render/<test></test>, document.getElementById/'app'//;


当我启动应用程序时,会加载Home组件而不存在任何问题,并且当我按下链接时 "Click Me", url 改变 localhost/about,, 但是,没有任何反应。 如果单击“更新”按钮,我将收到一条消息 "不能 GET /about." 很明显,我做错了什么,但我无法理解它是什么。 我也使用 Webpack.
已邀请:

龙天

赞同来自:

您需要使用确切的方式
/

, 否则它也会适应
/about

.


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


如评论中所述,对于我建议使用的事情
https://github.com/facebookinc ... t-app
, 这将验证您的服务器代码和设置的正确性 webpack. 尽快使用
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</h1>
const About = // => <h1>About Us</h1>

const App = // => /
<router>
<switch>
<route component="{Home}" exact="" path="/"></route>
<route component="{About}" path="/about"></route>
</switch>
</router>
/

export default App;


https://reacttraining.com/reac ... start
你会告诉你几乎是我刚才解释的事情。

知食

赞同来自:

如果你合作 localhost, 你需要添加 historyApiFallback: true 在您的文件中 webpack.config

君笑尘

赞同来自:

您还可以通过在最后保存默认路由来解决此问题


<route component="{About}" path="/about"></route>



<route component="{Home}" path="/"></route>

// 总是在最后

无需汇编关键字
exact

二哥

赞同来自:

也许这将有助于某人。 我忘了使用正确的故事而不是使用
Router

, 我用了
BrowserRouter

, 谁忽视了这个财产
history={...}

, 用他自己的。 我试图用故事创建的手重定向页面,但是
BrowserRouter

用我自己的。

江南孤鹜

赞同来自:

如果添加
exact

不解决问题,我替换它


<route component="{App}" exact="" path="/"></route>
<route component="{Login}" path="/login"></route>
<route component="{Register}" path="/register"></route>





<route exact="" path="/"> <app></app> </route>
<route path="/login"> <login></login> </route>
<route path="/register"> <register></register> </route>


将组件作为子路线放置解决我的页面路由,我希望它能帮助别人

石油百科

赞同来自:

使用

Switch

我们必须记住,我们指定了来自的路线的组成部分

最具体的



最常见的

. 在您的情况下,您指明 "/" 正面 "/about"., 因此,每次 react 寻找 "/about", 但下来 <route "="" 'react';="" 'react-dom';="" 'react-router-dom';="" ,="" ==""
import="" about"="" about".="" as="" const="" from="" home="//" import="" indexroute,="" link}="" react="" reactdom="" route,="" router,="" switch,="" {browserrouter="" 准确的="" 和="" 所以你可以降低="" 所以用途:="" 正面="" 满足我=""> <h1><link to="/about"/>Click Me</h1>
const About = // =&gt; <h1>About Us</h1>

const Test = // =&gt; /
<router>
<switch>
<route component="{About}" path="/about"></route>
<route component="{Home}" path="/"></route>
</switch>
</router>
/

ReactDOM.render/<test></test>, document.getElementById/'app'//;


</route>

要回复问题请先登录注册