React Router link not work

[PlutoCA]

Version

"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",

Steps to reproduce

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

<Link to='/'>Home</Link></Router> 

Expected Behavior

It didn't work, and it throws an exception for me. I don't know what happened,?

Most of google's answers are about router version issues, but it doesn't seem to be

can help me? Thank you

Actual Behavior

[PlutoCA]

import {
  Link, Router,
} from 'react-router-dom';

<Router><Link to='/'>home</Link></Router>

Sorry, I wrote the wrong code. The above error is caused by this code.

[PlutoCA]

I tried to write like this, but there will be new errors prompting me.

import { Link } from 'react-router-dom';

<Link to='/'>Home</Link></Router>

[fila90]

<Link> is definitely working as I'm using the same versions as you are and don't have any problems with it.

If you read the docs, you need to create history in order to use Router.
That being said, you probably don't need Router and want something like BrowserRouter or HashRouter. They create history for you by default.

[PlutoCA]

<Link> is definitely working as I'm using the same versions as you are and don't have any problems with it.

If you read the docs, you need to create history in order to use Router.
That being said, you probably don't need Router and want something like BrowserRouter or HashRouter. They create history for you by default.

Thanks

import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();

<Router history={history}><Link to='/ranking'>Ranking</Link>

I tried to write this, it didn't report an error, but it still doesn't work. It just adds a route to the browser address and doesn't seem to go to the jump address.

Is it that I should write this to router.js?

[PlutoCA]

import { Provider } from 'react-redux';
import {
  BrowserRouter, Route, Switch,
} from 'react-router-dom';

  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route path="/login" component={Login} exact />
        <Route path="/ranking" component={Ranking} exact />
        <Route path="/" component={Index} exact />
        <Route path="/seach" component={Seach} exact />
        <Route path="/download" component={Download}/>
      </Switch>
    </BrowserRouter>
  </Provider>

this is my router.js This is wrong.？

[fila90]

always put / route on top

you have a typo in seach, r is missing

<Switch>
    <Route exact path="/" component={Index} />
    <Route path="/login" component={Login} exact />
    <Route path="/ranking" component={Ranking} exact />
    <Route path="/search" component={Search} exact />
    <Route path="/download" component={Download}/>
</Switch>

in your component you don't need new Router, this will basically create router inside your BrowserRouter (if i'm not mistaken).

return something like this

import React from 'react';
import { Link } from 'react-router-dom';

function YourComponent() {
  return (
    <div>
      <h3>
        You're lost. Go to <Link to='/ranking'>Ranking</Link>
      </h3>
    </div>
  )
}

export default YourComponent

you have basic setup of working router in the docs as well

[PlutoCA]

always put / route on top

you have a typo in seach, r is missing

<Switch>
    <Route exact path="/" component={Index} />
    <Route path="/login" component={Login} exact />
    <Route path="/ranking" component={Ranking} exact />
    <Route path="/search" component={Search} exact />
    <Route path="/download" component={Download}/>
</Switch>

in your component you don't need new Router, this will basically create router inside your BrowserRouter (if i'm not mistaken).

return something like this

import React from 'react';
import { Link } from 'react-router-dom';

function YourComponent() {
  return (
    <div>
      <h3>
        You're lost. Go to <Link to='/ranking'>Ranking</Link>
      </h3>
    </div>
  )
}

export default YourComponent

you have basic setup of working router in the docs as well

I know where the error is. I tried to write <Header> as a global component, so I didn't write it in <Route> which made this <link> unable to work. Then I tried to use < link > on the test page and it worked.

<Provider store={store}>
    <Header></Header>
    <Router>
      <Switch>
        <Route path="/" component={Index} exact />
        <Route path="/login" component={Login} exact />
        <Route path="/ranking" component={Ranking} exact />
        <Route path="/search" component={Search} exact />
        <Route path="/download" component={Download}/>
        <Route path="/test" component={Test}/>
      </Switch>
    </Router>
    <Footer />
  </Provider>

[PlutoCA]

@fila90 Now there's a new question, how can I make < header > a global component and use < Link >

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!