首页 文章

React Router v4不显示组件

提问于
浏览
0

当我导航到localhost时,组件未显示:3000 / signup是否因为反应路由器更新为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,也使用Meteor .

1 回答

  • 1

    React Router v4是对React Router的重写,因此您必须阅读新的API并相应地调整您的代码 . 我建议仔细阅读所有可以找到的例子here . 这里's the basic example that looks similar to your code. The biggest thing you' ll通知你不再拥有集中路由配置 . 相反,你需要它时动态渲染 .

    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
    

相关问题