Question

我试图将React Router 4.0用于某些基本路由，但无法让它加载不同的组件。

当我使用localhost / messages /的url运行应用程序时，它会加载path ='/'指示的文件夹组件，但是当我将URL更改为localhost / messages / mess时，我得到404.

我的组件中似乎没有任何道具可用。

我的代码如下

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Folders from "./components/msg_folders";
import Messages from "./components/messages";

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



class Msgs extends Component  {
    constructor(props) {
        super(props);
    }

render () {
return (

<Router> 
    <div id ='panelmessage'>
        <Route path="/mess/" component={Messages} />
        <Route path="/" component={Folders} />
    </div>

</Router>
      )  
}
}



ReactDOM.render(
<Msgs />
, document.querySelector('#panelcontainer'));

Answer 1

我不知道您为什么要将message（localhost/message/mess或localhost/message）添加到您的网址，但是您没有处理此路径的路线。您的路线看起来不错，但您以错误的方式定位它。因此，要定位到您Messages组件，您应该转到网址＆gt; localhost/mess但不是localhost/message/mess。您似乎始终将message添加到url，您可以为basename /message添加const Message = (props) => ( <div> Message props: {JSON.stringify(props.match.url)} <br/> <Link to='/'>Back to Home</Link> </div> ) const App = () => ( <Switch> <Route path='/mess' component={Message}/> <Route path='/' component={Home}/> </Switch> ) Trip。然后你就可以像你一样瞄准它。

这是BrowserRouter，其设置与您相似，因此您可以使用它。

Trip

希望它会有所帮助

Answer 2

我的网址中包含message，因为我正在/ messages子目录中运行该应用。

我希望localhost/messages显示文件夹组件（它所做的）。我希望locahost/messages/mess显示Messages组件（给出404）。

添加basename='/message'没有任何区别。在我看来指向潜在原因的事情是，Msg道具不包含任何内容，即没有match个对象或任何其他对象。我不知道是什么原因引起的。我可以在ReactDom.render调用中为Msgs添加一个道具，它会显示但没有别的。

Answer 3

我能让它工作的唯一方法是使用HashRouter而不是BrowserRouter作为上面的codepen放入的原因。然而，这会在我的所有网址中添加哈希值，例如http://localhost/bc/messages/#/mess - 不知道如何摆脱这个。

路由看起来很基础，我无法相信花了多少时间来尝试使用它，肯定有一种方法可以使用BrowserRouter？

这是有效的代码（在url中使用hash）

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Folders from "./components/msg_folders";
import Messages from "./components/messages";

import {HashRouter, BrowserRouter, Route, Switch,  Link, browserHistory} from 'react-router-dom';



class Msgs extends Component  {
    constructor(props) {
        super(props);
    }



render () { 

return (

<HashRouter  history={browserHistory}> 
<div id ='panelmessage'>

    <Route path="/mess"  component={Messages} />
    <Route exact path="/" component={Folders} />

</div>
 </HashRouter>       

      )  
}
}



ReactDOM.render(
    <Msgs  />
, document.querySelector('#panelcontainer'));

无法让React Router加载组件

3 个答案: