2017-04-04 134 views
0

当我导航到本地主机时,组件未显示: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,也使用流星。

+0

的可能的复制[编程导航时使用反应路由器V4](http://stackoverflow.com/questions/42123261/programmatically-navigate-using-react-router-v4) – Dez

+0

@Dez感谢。那么我现在可以使用react-router v4来安装react-router-dom,代码仍然可以工作吗? – cala

+0

我切换到react-router v3,它的工作完美,上面的代码。 – cala

回答

1

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 
+0

谢谢泰勒,我会放弃这一点。与v3完全不同。 – cala

+1

非常欢迎。这是完全不同的,需要一些时间去适应,但一旦你习惯了它,我想你会喜欢它。如果遇到困难,请随时联系。 –

0

我也在为此苦苦挣扎。我已经阅读了很多教程和示例,但仍然不清楚:

  1. 您是否不再使用routes.jsx文件?煤矿是目前:

    JSX export const renderRoutes =() => ( <Router history={history}> <Switch> <Route exact path="/" component={AppContainer} /> <Route path="map/" component={MapPageContainer} /> </Switch> </Router> );

  2. 发生到启动的功能是什么? Mine目前是:

    Meteor.startup(()=> { render(renderRoutes(),document.getElementById('app')); });