时间戳

首页 > 解决方案 > React js - 问题实现路由器

reactjs - React js - 问题实现路由器

问题描述

我正在尝试实现反应路由器，该代码仅适用于索引路径，即"/"，但为其余 url 提供 404 错误。下面是我的代码：

***** HTML ***** 

<div id="rootDiv"></div>

<script src="/assets/libs/reactjs/react.development.js" crossorigin></script> 
<script src="/assets/libs/reactjs/react-dom.development.js" crossorigin></script>
<script src="/assets/libs/reactjs/browser.js"></script>
<script src="/assets/libs/reactjs/react-router.min.js" crossorigin></script>
<script src="/assets/libs/reactjs/react-router-dom.min.js" crossorigin></script>
<script type="text/babel" src="/components.js"></script>


***** components.js *****

var { BrowserRouter, Switch, Route } = ReactRouterDOM;

class Dashboard extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>Dashboard</div>
        )
    }
}

class LoginBox extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return(
            <div>LoginBox</div>
        )
    }
}


ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path="/" exact component={LoginBox}/>
            <Route path="/dashboard" exact component={Dashboard}/>
        </Switch>
    </BrowserRouter>, document.getElementById('rootDiv')
);

上面的 LoginBox 出现了，但是当我在 URL 中点击 /dashboard 时出现 404 错误。我从 google 和 stack-overflow 得到了很多答案，遵循了所有必需的更改/步骤，但我无法解决这个问题。

请让我在哪里出错。

标签： reactjsreact-router

解决方案

我认为您不需要仪表板路线中的“确切”。尝试将其更改为：

<Route path="/dashboard" component={Dashboard}/>

推荐阅读