React路由器v4不顯示組件

當我導航到本地主機時，組件未顯示：3000 /註冊是否因爲反應路由器已更新至v4，並且它們的方式您現在已經改變了路由？React路由器v4不顯示組件

我有我的main.js文件

import Signup from '../imports/ui/Signup'; 

import 
const routes = (
    <Router history={browserHistory}> 
    <Route path="/signup" component={Signup}/> 
    </Router> 
);

註冊組件

import React from 'react'; 

export default class Signup extends React.Component { 
    render() { 
    return <p>Signup</p> 
    } 
}

我使用的反應路由器V4，也使用流星。

來源

2017-04-04 cala

的可能的複製[編程導航時使用反應路由器V4]（http://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4） – Dez

@Dez感謝。那麼我現在可以使用react-router v4來安裝react-router-dom，代碼仍然可以工作嗎？ – cala

我切換到react-router v3，它的工作完美，上面的代碼。 – cala

React Router v4是對React Router的重寫，因此您必須閱讀新的API並相應地調整您的代碼。我建議通過所有的例子可以找到here。以下是與您的代碼類似的基本示例。你會注意到的最大的事情是你不再有一個集中的路由配置。相反，當你需要它們時，你動態地呈現它們。

import React from 'react' 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

const BasicExample =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home =() => (
    <div> 
    <h2>Home</h2> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About</h2> 
    </div> 
) 

const Topics = ({ match }) => (
    <div> 
    <h2>Topics</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    <Route path={`${match.url}/:topicId`} component={Topic}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select a topic.</h3> 
    )}/> 
    </div> 
) 

const Topic = ({ match }) => (
    <div> 
    <h3>{match.params.topicId}</h3> 
    </div> 
) 

export default BasicExample

來源

2017-04-04 16:09:20

謝謝泰勒，我會放棄這一點。與v3完全不同。 – cala

非常歡迎。這是完全不同的，需要一些時間去適應，但一旦你習慣了它，我想你會喜歡它。如果遇到困難，請隨時聯繫。 –

我也在爲此苦苦掙扎。我已經閱讀了很多教程和示例，但仍然不清楚：

您是否不再使用routes.jsx文件？煤礦是目前：

JSX export const renderRoutes =() => ( <Router history={history}> <Switch> <Route exact path="/" component={AppContainer} /> <Route path="map/" component={MapPageContainer} /> </Switch> </Router> );
發生到啓動的功能是什麼？ Mine目前是：

Meteor.startup（（）=> { render（renderRoutes（），document.getElementById（'app'））; }）;

來源

2018-02-20 09:53:48

React路由器v4不顯示組件

回答

相關問題