时间戳

首页 > 解决方案 > 如何重定向到 React.js 中的页面

javascript - 如何重定向到 React.js 中的页面

问题描述

我正在尝试使用 JSX<Link />标签重定向页面。这是我的代码：

链接.js：

<Link to="/kategoriler" className="nav-link">
    categories
</Link>

应用程序.js：

import React, {Component} from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Link } from 'react-router'
import links from 'links';
import CategoriesPage from './components/pages/categoriesPage';

class App extends Component {
    render(){
        return (
            
            <Router>
                <Route path = "/" component = {App}>
                    <Route path="kategoriler" component={CategoriesPage} />
                </Route>
                
            </Router>
            
        );
    }
} 


export default App;

它应该加载categoriesPage.js，但它什么也不做。当我去 http://localhost:3000/kategoriler 它显示空白页。我错过了什么？

标签： javascriptreactjs

解决方案

  1. 我很确定<Link>组件应该react-router-dom从而不是从react-router
  2. <Route path="kategoriler" component={CategoriesPage} />您确实忘记了像这样 -> 的路线名称中的斜杠<Route path="/kategoriler" component={CategoriesPage} />，也许您也可以exact在路线中添加参数？
  3. 也许您可以尝试将 2 条路线彼此相邻放置，而不是像这样将其嵌套在 App 中
<Route exact path="/" component={App} />
<Route exact path="/kategoriler" component={CategoriesPage} />

推荐阅读