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

Question

I'm trying to redirect the page using JSX <Link /> tag. Here is my code:

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;

It should load the categoriesPage.js , but it does nothing. When I go to http://localhost:3000/kategoriler it shows blank page. What am I missing?

Answer 1

1. I'm pretty sure the <Link> component should be imported from react-router-dom and not react-router
2. <Route path="kategoriler" component={CategoriesPage} /> you did forgot the slash in the route name like this -> <Route path="/kategoriler" component={CategoriesPage} /> , maybe you can add exact params in the route too?
3. Maybe you can try to put the 2 routes next to each other instead of nesting it inside the App like this

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