Question

此刻我正在学习React Router，想知道是否有可能将Topics.js渲染到一个新组件中，并单击click删除顶部的链接。

假设我想拥有卡片而不是链接，当我单击卡片时，我希望链接消失并出现在新页面上，因此只有Topic.js组件才会出现在页面上

https://stackblitz.com/edit/react-router-dynamic-routes?file=index.js

Answer 1

听起来您应该将标头区域设置为自己的组件，然后将该组件作为Home组件的一部分，而不是Topics

class App extends Component {
  render() {
    return (
        <div>
          <Route exact path='/' component={Home} />
          <Route path='/topics' component={Topics} />
        </div>
    );
  }
}

class AppLinks extends Component {
  render() {
    return (
        <div>
          <ul>
            <li>
              <Link to='/'>Home</Link>
            </li>
            <li>
              <Link to='/topics'>Topics</Link>
            </li>
          </ul>
        </div>
    );
  }
}

export default class Home extends Component {
  render() {
    return (
      <div> 
        <AppLinks /> 
        HOME 
      </div>
    );
  }
}

Answer 2

React.lazy函数使您可以将动态导入呈现为常规组件。

const Login = React.lazy(() => import('./views/Pages/Login'));
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />

Learn more

带React Router的动态组件

2 个答案: