Question

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

links.js：

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

App.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时，它显示空白页。我想念什么？

Answer 1

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

<Route exact path="/" component={App} />
<Route exact path="/kategoriler" component={CategoriesPage} />

如何在React.js中重定向到页面

1 个答案: