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.
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    龙天

    赞同来自:

    您需要使用确切的方式
    /

    , 否则它也会适应
    /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
    你会告诉你几乎是我刚才解释的事情。
    2021-03-20 0 0
    分享

    知食

    赞同来自:

    如果你合作 localhost, 你需要添加 historyApiFallback: true 在您的文件中 webpack.config
    2021-03-20 0 0
    分享

    君笑尘

    赞同来自:

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


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



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

    // 总是在最后

    无需汇编关键字
    exact
    2021-03-20 0 0
    分享

    二哥

    赞同来自:

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

    , 我用了
    BrowserRouter

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

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

    用我自己的。
    2021-03-20 0 0
    分享

    江南孤鹜

    赞同来自:

    如果添加
    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>


    将组件作为子路线放置解决我的页面路由，我希望它能帮助别人
    2021-03-20 0 0
    分享

    石油百科

    赞同来自:

    使用

    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>
    2021-03-20 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved