Question

我正在尝试实现React Router，该代码仅适用于索引路径，即“ /” ，但对于其余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和堆栈溢出中获得了很多答案，按照所有必需的更改/步骤进行操作，但我无法解决该问题。

请让我在哪里出问题了。

Answer 1

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

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

React js-问题实现路由器

1 个答案: